# webpack watch 详解
## 安装、初始化
1. npm init 初始化项目生成package.json
2. 安装webpack和webpack-cli
`npm install webpack webpack-cli -D`
3. 新建入口文件：src/index.js
4. 创建`webpack.config.js`，代码如下：
```
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './build')
}
}
```
5. `package.json` 中配置打包命令：
```
"scripts": {
"build": "webpack"
},
```
6. 建立 html 模板文件，如 public/index.html，代码如下：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
```
7. 安装 html处理插件
`npm install html-webpack-plugin -D`
8. 在 webpack.config.js 的 plugins 中配置 html-webpack-plugin 插件
```
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './build')
},
plugins: [
new HtmlWebpackPlugin({
title: '页面标题',
template: './public/index.html'
})
]
}
```
9. 运行打包命令：
`npm run build`
此时的问题：不能实时编译文件，不能实时提示代码错误
# watch使用
## 启动命令配置如下：
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
此时，写完代码即可自动编译，配合 vscode 的 Live Server插件，能做到实时刷新。
## 在 webpack.config.js 中配置：
```
module.exports = {
watch: true, // 实时编译
}
```
此时，运行 `npm run build` 也能做到自动编译
## watch 的优劣：
1. watch方案监听文件的变化，实时自动打包
2. 通过 vscode 的 Live Server 提供本地服务，并自动刷新
3. 它对源代码每次都重新打包
4. 编译成功后，都会重新生成文件，文件操作（file system 效率不高）
5. Live Server属于VSCODE插件，用其他IDE，还要重新解决本地服务和热更新。
6. Live Server每次都是刷新整个页面，即使只动了一点点代码
# webpack-dev-server (WDS) 详解
## 安装
`npm install webpack-dev-server -D`
## package.json 配置
"scripts": {
"build": "webpack",
"dev": "webpack serve" // 或者 webpack server 也可以
},
## 运行
`npm run dev`
此时，会自动启动服务。
但是会报 “The 'mode' option has not been set, webpack will fallback to 'production' for this value.”，显示在页面上，这是因为 webpack.config.js 没有配置 mode 选项
而且，它不会产生文件和文件夹，而是利用 memfs插件，读写内存，比读取文件更加快
它是通过 express 开启本地服务的
注意：此时，页面更新，仍旧是刷新整个页面，后续会有相关配置来解决这个问题
# webpack-dev-middleware 了解