标签：输出 name h5 webpack options path loader 目录 css

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

标签：输出,name,h5,webpack,options,path,loader,目录,css
来源： https://blog.csdn.net/weixin_43443325/article/details/120180301

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。