如何创建一个带有热更新的 Webpack 项目
大家都知道，Vue 项目启动后，在页面里改了某个东西，浏览器会自动刷新，那是怎么实现的呢？带着疑问，大家和我一起探讨下。
第一步：创建一个 package.json 文件
npm init -y
运行完默认文件内容如下：
{
"name": "webpack.web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
第二步：安装 webpack webpack-cli
npm install -D webpack webpack-cli
webpack默认会找 src 文件夹下的index.js文件作为入口文件，所以我们创建 src 文件夹，并在src 文件夹中创建index.js文件。
安装和创建完成后，我们就可以测试打包了，运行npx webpack，结果如下：
注意：我们不能全局安装 webpack，以免影响其他的项目，使用 npx 命令运行局部的 webpack 文件即可。
打包成功后，在项目目录下多了个 dist 文件夹，里面有个 main.js 文件，如下：
有上述得知，在 webpack 中，入口文件 和 打包生成的文件及文件夹都有默认配置，我们业可以手动配置。
配置打包文件
在 package.json 文件中，增加 "scripts" 如下：
"scripts": {
"build": "webpack"
}
配置好后，我们再运行npm run build就等同于npx webpack
说白了，就是在 "scripts"中给webpack 起了一个别名叫build，使用 npm run命令类似于npx 优先使用局部的 webpack。
写到这里是不是有点像Vue 项目打包时的样子了，淡定，我们接着来。。。
第三步：创建 webpack.config.js 文件并配置
const path = require('path')
function resolve(dir){
return path.resolve(__dirname, dir)
}
module.exports = {
// 模式
mode: 'production',
// 入口
// entry: './src/index.js', // 简写形式
// entry: {
// main: './src/index.js' // main 名称可以随便起，比如 app
// },
entry: {
main: resolve('src/index.js') // 最好写成绝对路径
},
// 出口
output:{
path: resolve('dist'), // 打包文件输出的目录
filename: 'bundle.js' // 输出的文件的名称
},
// 模块加载器
module:{
rules:[
]
},
// 插件
plugins:[
]
}
配置好后，运行 npm run build 命令进行重新打包
打包成功后，我们可以在 dist 文件夹中看到新打包的文件 bundle.js
这里有3个问题：
- 重新打包后，并没有清除之前的打包文件
- 不能实现自动打包，类似于 Vue 的热更新并没有实现
- 没有把打包后的文件自动引入到 public/index.html 中
第四步：解决上述 3 问题
- 安装 webpack-dev-server 解决自动打包问题
- 安装 html-webpack-plugin 解决不能自动引入问题
- 安装 clean-webpack-plugin@1.0.1 解决不能清除文件问题
安装成功后，还需要在 packsge.json 文件中配置 "scripts"
"scripts": {
"build": "webpack --mode production",
"serve": "webpack-dev-server --mode development"
}
--mode 是指定运行模式
配置 webpack.config.js 文件的 module 和 plugin
在文件头部引入我们下载好的包
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpakPlugin = require('clean-webpack-plugin');
在webpack.config.js 文件中配置plugins
plugins:[
new HtmlWebpackPlugin({
// 默许指定 模板的路径 否则会篡改网页 title
template: resolve('public/index.html')
}),
new CleanWebpakPlugin(['dist'])
]
配置好后，运行命令npm run serve，结果如下：
写到这里，是不是更像 Vue的 启动命令了
也可以启动后自动打开浏览器，需配置webpack.config.js 中的devServer
再次运行启动命令 npm run serve
哇哦，自动打开浏览器了！！！
再测试更改页面内容
哇哦，自动打包了，页面也自动刷新了（实现了模拟 Vue 热更新）
