webpack配置指定输出目录和名称记录一下

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //表示自定义的系统配置

module.exports = {
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
            //配置rem
          require("postcss-px2rem")({
            // remUnit 取设计稿的1/10 ，如设计稿是375 则设置为37.5 设计稿为750 设置为75
            remUnit: 37.5,
          }),
        ],
      },
    },
  },
  devServer: {
    proxy: {
      "/api": {
        target: "https://xxxx.com", // target host
        ws: true, // proxy websockets
        changeOrigin: true, // needed for virtual hosted sites
        // pathRewrite: {
        //   "^/api": "", // rewrite path
        // },
      },
    },
  },
  // 基本路径
  publicPath: "/",
  // 输出文件目录
  outputDir: path.resolve(__dirname, "./dist"),
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  configureWebpack: {
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号】
      filename: `h5/[name].js`,
      chunkFilename: `h5/[name].js`,
    },
    plugins: [
      new MiniCssExtractPlugin({
        // 修改打包后css文件名
        filename: `h5/[name].css`,
        chunkFilename: `h5/[name].css`,
      }),
    ],
  },
  // 修改打包后img文件名
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("url-loader")
      .tap((options) => {
        options.name = `h5/[name].[ext]`;
        options.fallback = {
          loader: "file-loader",
          options: {
            name: `h5/[name].[ext]`,
          },
        };
        return options;
      });
    if (process.env.NODE_ENV === "production") {
      config.plugin("html").tap((opts) => {
        //指定入口名称
        opts[0].filename = "./index.html";
        return opts;
      });
    }
  },
};