通过 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
执行命令,编译完成后也不会终止进程,当文件更改后会再次重新编译
此时会开启一个服务,通过 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
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的内容可以参考我其它的博文,持续更新中~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。