webpack篇（一）：webpack 5 热更新体验

工作之余，想自己配一把webpack。热更新卡了半天，直接上代码(标红部分是重点)：

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

/*
* 快速生成webpack配置文件：npx webpack-cli init
* 具体配置：https://webpack.docschina.org/configuration/
* */
module.exports = {
  /*
  * "production" | "development" | "none"：none默认就是production
  *  根据环境打包，需要将配置导出为函数。
  *  详情：https://webpack.docschina.org/configuration/mode/
  *  module.exports = (env, argv) => {}
  * */
  // context: __dirname, // string（绝对路径！）
  // mode: "development",
  target: "web",  // 这里很重要，默认是package.json中的browserslist,没有的话值是"web"
  entry: {
    // print: "./src/js/print.js",
    index: "./src/index.js",
  }, // String / Object / Array
  devtool: 'inline-source-map', // 帮助发现错误
  output: {
    filename: "[name].bundle.js", // 输出文件名称
    // clean: true, // 每次build清理dist目录
    path: path.resolve(__dirname, 'dist'), // 输出文件目录
    // publicPath: "./", // 静态文件目录，url对应index.html
    // library: { // 这里有一种旧的语法形式可以使用（点击显示）
    //   type: "umd", // 通用模块定义
    //   name: "MyLibrary", // string | string[]
    // },
    // uniqueName: "my-application",
    // name: "my-config",
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true,
    open: true,
    // hotOnly: true,
    // inline: true,
    proxy: {} // 代理
  },
  module: {
    // rules: [
    //   {
    //     test: /.less$/i,
    //     use: ["style-loader", "css-loader", "less-loader"],
    //   },
    //   {
    //     test: /.css$/i,
    //     use: ["style-loader", "css-loader"]
    //   },
    //   {
    //     test: /.(png|svg|jpg|jpeg|gif)$/i,
    //     type: 'asset/resource',
    //   },
    // ],
  },
  resolve: {},
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Development",
      cache: false
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false // 注释是否提取到单独文件中
      })
    ]
  },
  node: {}
}

记录进步每一天。