// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 让 webpack 知道以哪个模块为入口，做依赖收集
  // 具体参考 https://webpack.js.org/concepts/#entry
  entry: "./src/index.js",
  // 告诉 webpack 打包好的文件存放在哪里，以及怎么命名
  // 具体参考 https://webpack.js.org/concepts/#output
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  module: {
    // 使用 babel-loader 编译 es6/7/8、ts 和 jsx 语法
    // 注意：这里没有配置 preset，而是在 babel.config.js 文件里面配置
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /.(png|jpg|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "img/[name].[ext]",
          },
        },
      },
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    // 这里通常想要指定自己的 html 文件模板，也可以指定生成的 html 的文件名
    // 如果不传参数，会有一个默认的模板文件
    // 具体参考 https://github.com/jantimon/html-webpack-plugin
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

module.exports = function () {
  // 具体参考：https://babeljs.io/docs/en/presets
  const presets = [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript",
  ];
  // 具体参考：https://babeljs.io/docs/en/plugins
  const plugins = [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    ["@babel/plugin-proposal-object-rest-spread", { useBuiltIns: true }],
  ];
  return { presets, plugins };
};

const mockServer = require("./mock/server");
module.exports = {
  devServer: {
    after: (app) => {
      mockServer(app);
    },
  },
};

// mock/config.js
module.exports = {
  '/api/index': {
    local: '/index.json'
  }
}

// mock/server.js
const fs = require('fs')
const path = require('path')
const config = require('./config')

module.exports = function (app) {
  Object.keys(config).forEach(key => {
    app.use(key, function (req, res) {
      const filename = path.join(__dirname, config[key].local)
      if (filename.match(/\.json$/)) {
        // json 文件直接读取内容返回
        res.json(JSON.parse(fs.readFileSync(filename)))
      } else {
        // js 文件被当作中间件引入
        // 引入前删除掉该文件的缓存，如果文件内容修改，不用重启 devServer
        delete require.cache[filename]
        require(filename)(req, res)
      }
    })
  })
}

// index.json
{
  "success": true,
  "data": {
    "key": "value"
  }
}

// webpack.config.js

module.exports = {
  // 这里 entry 是一个对象，每个页面和它的入口模块是一个 key/value 对
  entry: {
    index: "./src/pages/index.js",
    about: "./src/pages/about.js",
  },
  output: {
    // 这里 filename 有所改变，[name] 表示 entry 里面的 key
    // 表示每个页面的 bundle 文件以自己的名称命名
    filename: "js/[name].js",
  },
  plugins: [
    // index 页面
    new HtmlWebpackPlugin({
      template: "./src/pages/index.html",
      // 要注入的 entry 模块，如果不指定，会把所有 entry 模块都注入
      chunks: ["index"],
    }),
    // about 页面
    new HtmlWebpackPlugin({
      template: "./src/pages/about.html",
      // about 页面的 html 文件名
      filename: "about.html",
      chunks: ["about"],
    }),
  ],
};

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/pages/index.html",
      // 注入公共模块 commons
      chunks: ["commons", "index"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/about.html",
      filename: "about.html",
      // 注入公共模块 commons
      chunks: ["commons", "about"],
    }),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 创建一个 commons 块，用于包含所有入口模块共用的代码
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2,
        },
      },
    },
  },
};

new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  // both options are optional
  filename: "[name].css",
  chunkFilename: "[id].css",
});

rules: [
  {
    enforce: "pre", // 强制在 babel 之前执行
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "eslint-loader",
      options: {
        useEslintrc: false,
        eslintPath: require.resolve("eslint"),
        baseConfig: {
          // 同时需要安装：
          // babel-eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
          extends: [require.resolve("eslint-config-react-app")],
        },
      },
    },
  },
];

const argv = require('minimist')(process.argv.slice(0))
const production = argv.mode === 'production'

{
  optimization: {
    minimize: production,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          parse: { ecma: 8, },
          compress: { ecma: 5, warnings: false, comparisons: false, inline: 2, },
          mangle: { safari10: true, },
          output: { ecma: 5, comments: false, ascii_only: true, },
        },
        parallel: true,
        cache: true,
        sourceMap: shouldUseSourceMap,
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
  }
}