Appearance
webpack 热更新
webpack 中的文件监听
文件监听是在发现源码发生变化时，自动构建出新的输出文件。
webpack 开启监听模式，有两种方式：
- 启动 webpack 命令时，带上 --watch 参数
javascript
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
}
1
2
3
4
2
3
4
唯一缺陷：每次需要手动刷新浏览器
- 在配置 webpack.config.js 中设置 watch:true
文件监听的原理分析
轮询判断文件的最后编程时间是否变化 某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等 aggregateTimeout
javascript
module.export = {
// 默认false,也就是不开启
watch: true,
watchOptions: {
// 默认为空，不监听的文件或者文件夹，支持正则匹配
ignored: /node_modules/,
// 监听到变化发生后会等300ms再去执行，默认300ms
aggregateTimeout: 300,
// 判断文件是否发生变化是通过不停询问系统文件有没有变化实现的，默认每秒问1000次
poll: 1000
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
热更新 webpack-dev-server
WDS 不刷新浏览器 WDS 不输出文件，而是放在内存中 使用 HotModuleReplacementPlugin 插件
bash
cnpm i webpack-dev-server -D
1
在 webpack.config.js 中配置服务的参数
javascript
devServer:{ //开发服务器的配置
port:3000,//端口
progress:true,//进度条
contentBase: "./dist", //运行目录
compress: true, //启用gzip压缩所有服务
},
1
2
3
4
5
6
2
3
4
5
6
在这种情况下，webpack 就可以起一个服务但是浏览器是需要 html
热更新：使用 webpack-dev-middleware 也可以
热更新的原理分析
webpack Compile 将 JS 编译成 Bundle HMR Server: 将热更新的文件输出给 HMR Runtime Bundle server: 提供文件在浏览器的访问 HMR Runtime: 会被注入到浏览器，更新文件的变化 bundle.js 构建输出的文件
配置 html 打包
javascript
yarn add html-webpack-plugin
1
在 src 目录下新建一个 html 文件
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 模板 -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
引入 html 打包插件
javascript
plugins:[ //数组放着所有的webpack插件
new HtmlWebpackPlugin({
template:'./src/index.html',//模板路径
filename:"index.html",//模板名称
minify:{
removeAttributeQuotes:true,//删除属性的双引号
collapseWhitespace:true,//打包出一行
},
hash: true, // 增加哈希戳，解决缓存问题
})
]
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
打包的时候 js 也可以加哈希，避免缓存
javascript
output:{
filename:'bundle.[hash:8].js', // 打包后的文件名，hash只有8位
path: path.resolve(__dirname,'dist'), //路径必须是一个绝对路径
},
1
2
3
4
2
3
4