手动配置 webpack.config.js文件

现在vue和react 都有脚手架工具内默认配置好了 webpack ，目的是让开发更专注于写代码，而不是打包项目。
但是还是有必要了解一下webpack
之前有跟着视频熟悉一遍文档，现在webpack 官方版本已经到了5，又跟着熟悉了一遍api
以下是手动配置的js文件，已经包含了一般的项目打包的功能。

const path = require("path");
//简化创建服务于 webpack bundle 的 HTML 文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//删除/清理构建文件夹dist
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//将CSS提取为独立的文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          // "style-loader",
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              //css modules 开启
              modules: true,
            },
          },
          {
            loader: "postcss-loader",
          },
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name]_[hash:6].[ext]",
            outputPath: "images/",
            //推荐使用url-loader 因为url-loader支持limit
            //推荐小体积的图片资源转成base64
            limit: 12 * 1024, //单位是字节 1024=1kb
          },
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  devtool: "cheap-inline-source-map",
  devServer: {
    //可以是相对路径
    contentBase: "./dist",
    open: true,
    hot: true,
    //即便HMR没有生效，浏览器也不要自动刷新。
    hotOnly: true,
    //代理
    proxy: {
      "/api": {
        target: "http://localhost:9092",
      },
    },
    //mock server
    before(app, server) {
      app.get("/api/mock.json", (req, res) => {
        res.json({
          hello: "express",
        });
      });
    },
    port: 8080,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "css/[name]-[contenthash:8].css",
    }),
    new HtmlWebpackPlugin({
      //选择html模板
      title: "首页",
      template: "./src/index.html",
      filename: "index.html",
    }),
    //模块热替换插件
     new webpack.HotModuleReplacementPlugin(),
  ],
}