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",
      }),
    ],
  };
};