webpack常用配置说明（以webpack5为主）

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const TerserPlugin = require("terser-webpack-plugin");
//把css从JS中单独提取做压缩
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => {
  //参数是自定义的，随便写都行，如果不写等于什么，就是默认的true值
  //eg:"dev": "webpack --env abc=321",
  console.log(env);
  return {
    entry: {
      // index: {
      //   import: "./src/index.js",
      //   dependOn: "shared",
      // },
      // other: {
      //   import: "./src/other.js",
      //   dependOn: "shared",
      // },
      // //和dependOn名字保持一致。这一部分是共享的JS文件
      // shared: "./src/common/util.js",
      // page:['./src/index.js','./src/other.js'],

      index: "./src/index.js",
      other: "./src/other.js",
      home: ["./src/js/home.js", "./src/css/home.css"],
    },
    output: {
      filename: "[name].[contenthash].bundle.js",
      path: path.resolve(__dirname, "dist"),
      clean: true,
      publicPath:'auto',
      //Webpack 会在输出的 bundle 中生成路径信息。然而，在打包数千个模块的项目中，
      //这会导致造成垃圾回收性能压力。在 options.output.pathinfo 设置中关闭：
      pathinfo: false,
      // trustedTypes:true
    },
    // //以上配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下。（译注：serve，将资源作为 server 的可访问文件）
    // //這段暂时没发现具体生效的样子
    // devServer: {
    //   static: "./dist",
    // },
    optimization: {
      //设置为true以后webpack会启动摇树算法过滤掉未引用的文件，false的话则有自己的规则定义哪些文件可以包含到项目
      usedExports: true,
      // //共享模块不设置这个会导致所有引用共享模块的地方都只是引用了地址不是单独的空间
      runtimeChunk: true,
      // sideEffects: true,//生产环境配置到package.json中，
      /**
       * "sideEffects": [
       *    "./src/common/util.js"
       *  ],
       *  不想被摇树掉的文件可以这么写
       */
      providedExports: true,
      moduleIds: "deterministic",
      splitChunks: {
        chunks: "all",
      },
    },
    mode: "production", //production  development
    // devtool: "eval-source-map", //报错后可以出现栈追踪的source map,这个模式下可能会导致sideEffects失效，从而让 未引用的方法也打包
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          use: [
            {
              loader: "file-loader",
              options: {
                //指定文件输出的地址是哪个
                outputPath: "./img",
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: "管理输出",
      }),
      // //拷贝指定文件夹原样打包到指定目录
      // new CopyPlugin({
      //   patterns: [
      //     { from: "./src/lib", to:"./lib"},
      //   ],
      // }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
      }),
    ],
  };
};