const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Timestamp = new Date().getTime();
const name = "castle";

module.exports = {
  // baseUrl: "./",
  // assetsDir: "static",
  // productionSourceMap: false,
  configureWebpack: {
    name: name,
    // 修改打包后的js文件名称
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `js/[name].${Timestamp}.js`,
      chunkFilename: `js/[name].${Timestamp}.js`,
    },
    // 修改打包后的css文件名称
    plugins: [
      new MiniCssExtractPlugin({
        filename: `css/[name].[contenthash].${Timestamp}.css`,
      }),
    ],
  },
  // 修改打包后的img文件名称
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("url-loader")
      .tap(() => {
        return {
          limit: 4096,
          fallback: {
            loader: "file-loader",
            options: {
              name: `img/[name].[contenthash].${Timestamp}.[ext]`,
            },
          },
        };
      });
  },
};