简称

WDS

热更新

配置成功后，浏览器 console 输出：

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] Live Reloading enabled.

优点

• 不刷新浏览器
• 不输出文件，而是放在内存中

安装

yarn add webpack-dev-server -D

修改 package.json，添加如下脚本，此处为两份 webpack 配置，一个生产环境，一个开发环境。

"scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js"
},

运行

yarn run dev

yarn run build

配置

webpack.dev.js 文件

devServer: {                
    publicPath: '/dist',        // 路径，可省略
    open: 'google chrome',      // 浏览器选择
    compress: true,             // 压缩
    host: '0.0.0.0',            // 设置局域网访问
    port: '3000',               // 设置端口
    hot: true,                  // 热更新
    inline: true,               // 热更新用
    historyApiFallback: true    // H5用
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

指定浏览器打开，其他浏览器，将 google chrome 替换为：

• firefox
• microsoft edge
• opera
• safari