如何创建一个带有热更新的 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个问题：

1. 重新打包后，并没有清除之前的打包文件
2. 不能实现自动打包，类似于 Vue 的热更新并没有实现
3. 没有把打包后的文件自动引入到 public/index.html 中

第四步：解决上述 3 问题

1. 安装 webpack-dev-server 解决自动打包问题
2. 安装 html-webpack-plugin 解决不能自动引入问题
3. 安装 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 热更新）