如何创建一个带有热更新的 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，结果如下：

image.png

注意：我们不能全局安装 webpack，以免影响其他的项目，使用 npx 命令运行局部的 webpack 文件即可。

打包成功后，在项目目录下多了个 dist 文件夹，里面有个 main.js 文件，如下：

image.png

有上述得知，在 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 问题

上述问题也很简单，只需三个包即可得到解决：

npm install  -D webpack-dev-server html-webpack-plugin clean-webpack-plugin

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'),
    filename: 'index.html', // 生成的文件名称
    inject: true, // script 标签放在哪 可选值：body head false true(和body一样)
    hash: true, // 静态资源带 hash
    minify: {
        minifyJS: true, // 压缩 html 中 JS
        minifyCSS: true, // 压缩 html 中 CSS
        removeComments: true, // 删除 html 中注释
        removeAttributeQuotes: false, // 取出属性标签的引号
        removeEmptyAttributes: true, // 删除空值属性
        collapseBooleanAttributes: true, //  省略布尔值的属性值
        removeScriptTypeAttributes: true, // 只移除 type = 'text/javascript' 
        removeStyleLinkTypeAttributes: true, // 只移除 type = 'text/css'
        collapseInlineTagWhitespace: true, // 不要在 display: inline 的元素之间留下空格
        collapseWhiltespace: true // 必须于此属性一起使用
    },
    // 主要用于多页面，当你有多个入口文件时，
    // 编译后会生成多个打包文件，利用 chunks 选择你要使用的 JS 文件
    // 这些文件就会自动添加到 html 中
    chunks: ['index']
  }),
  new CleanWebpakPlugin(['dist'])
]

配置好后，运行命令 npm run serve，结果如下：

image.png

写到这里，是不是更像 Vue 的 启动命令了

也可以启动后自动打开浏览器，需配置 webpack.config.js 中的 devServer

devServer:{
  open: true // 自动打开浏览器访问
},

或者配置 package.json 中的启动命令增加 --open，如下

"scripts": {
  "build": "webpack --mode production",
  "serve": "webpack-dev-server --mode development --open"
}

再次运行启动命令 npm run serve
哇哦，自动打开浏览器了！！！

再测试更改页面内容
哇哦，自动打包了，页面也自动刷新了（实现了模拟 Vue 热更新）

今天的文章就到这里了，感谢大家的支持，记得点赞哦~~~