webpack|webpack dev server 与 hot module replace 提高开发效率 webpackdevserver与hotmodulereplace提高

通过 webpack 命令编译源代码时，如果我们对源代码进行了修改，需要重新执行命令才能看到编译后的效果。
这样在开发中非常的影响效率，如果存在一种方式，当文件被修改时，webpack 自动监听重新编译，并反馈给开发者，这样就能更高效的进行开发。
watch
我们通过 webpack 执行命令时，编译完成之后进程会停止，而 webpack --watch 编译完成后，不会停止进程，并且当文件内容发生更改时，将重新执行编译操作。

文章图片

在项目中有两种配置方式

package.json 中配置命令
webpack.config.js 中配置参数

// package.json "scripts": { "build": "webpack", "watch": "webpack --watch", },// webpack.config.js module.exports = { watch: true, };

配置在 package.json 中通过 npm run watch 执行命令，实际上就是执行的 webpack --watch ，在 webpack.config.js 中配置 wath 参数，可以直接通过 npm run build 编译
webpack-dev-server
通过 watch 命令，每一次重新编译都会生成新的文件，包括 js、html、css、图片资源，这样效率不高，并且通过开启服务，在浏览器中展示 html 页面的方式每次都会刷新页面。
可以通过 webpack-dev-server 解决以上问题，它每次编译不会重新生成文件，而是将资源保存在内存中。
通过 npm install webpack-dev-server -D 安装依赖，package.json 中配置

// package.json "scripts": { "build": "webpack", "serve": "webpack serve" },

npm run serve 执行命令，编译完成后也不会终止进程，当文件更改后会再次重新编译

webpack|webpack dev server 与 hot module replace 提高开发效率

文章图片

此时会开启一个服务，通过 http://localhost:8080/ 在浏览器中访问

文章图片

Hot Module Replace
目前为止，每次修改了文件，都会重新加载整个页面，在开发时，随着项目的增大，对所有页面都重新加载耗时会越来越长，有时候只是对某些样式做了修改，只更新修改的内容对开发而言更高效。
这时候我们就可以通过 Hot Module Replace （热模块替换）来实现，需要在 webpack.config.js 中开启，以及需要使用 Hot Module Replace 的地方通过 module.hot.accept 引入。

// webpack.config.js module.exports = { devServer: { hot: true, }, }; // index.js import './math'; if (module.hot) { module.hot.accept('./math', () => { console.log('math文件被修改了'); }); }

当引入的 math.js 文件被修改时，执行修改的部分，以及修改后的回调函数。

文章图片

hotOnly
当源代码编译出错且被解决后，浏览器会被刷新，所有内容将重新加载。想要编译错误也通过热更新来处理，需要设置 hotOnly 属性。

devServer: { hot: true, hotOnly: true, }

此时，当错误被修复时，只会更新修复的文件

文章图片

compress
【webpack|webpack dev server 与 hot module replace 提高开发效率】compress 属性表示是否对编译后资源压缩，开启后将采用 gzip 的压缩方式，在响应头标识 Content-Encoding，浏览器会自动解压 gzip 文件

文章图片

通过 compress: true 来开启，bundle.js 文件由原来的367kb压缩到93kb

文章图片

proxy
比如本地项目运行在8000端口，访问接口 http://localhost:9000/math，会报错跨域

文章图片

当项目开发时，接口请求存在跨域情况时，可通过 devServer 中的 proxy 属性配置代理解决，发送请求时直接使用 /api 来替代 http://localhost:9000/

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:9000/', }, }, }, };

通过 fetch 发送网络请求

const url = '/api/math'; fetch(url) .then((res) => { console.log('then', res); return res.text(); }) .then((res) => { console.log('res', res); });

请求成功并获取响应，但此时我们发现请求url地址多了个 "/api"，以及请求源地址还是 8000端口

文章图片

可以通过 pathRewrite 属性替换 /api，以及 changOrigin 修改请求host属性

文章图片

其它参数

host 设置主机地址
port 设置端口
open 编译后是否自动打开浏览器
publicPath 指定 index.html 文件打包引用的基本路径
contentBase 为引入的静态资源提供服务（默认值指向当前目录的路径）
watchContentBase 当引用的静态资源发生变化时，是否刷新浏览器

整合以上 devServer 的配置

module.exports = { devServer: { hot: true, contentBase: path.resolve(__dirname, './public'), watchContentBase: true, hotOnly: true, port: 8000, open: true, compress: true, proxy: { '/api': { target: 'http://localhost:9000/', pathRewrite: { '/api': '', }, changeOrigin: true, }, }, }, };

配置好 devServer 的属性，可以让我们的开发变得更高效~
以上就是 webpack dev server 与 hot module replace 相关的总结，更多有关webpack的内容可以参考我其它的博文，持续更新中~