使用wc-async打包Web Component时，vue.config.js配置及iconfont.css提取方法

一、Web Component 打包配置 #

将你命令行中的参数转化为 vue.config.js 内的固定配置，无需每次手动输入命令参数：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  chainWebpack: config => {
    // 设置打包目标为异步 Web Component（对应原命令的 --target wc-async）
    config.target('web-component-async');
    // 设置 Web Component 的全局名称（对应原命令的 --name chat-ui）
    config.output.library('chat-ui');
    // 指定入口组件文件（对应原命令的 src/views/Chat/Launcher.vue）
    config.entry('app').clear().add('./src/views/Chat/Launcher.vue');

    // 启用打包分析报告（对应原命令的 --report），仅在生产环境生效
    if (process.env.NODE_ENV === 'production') {
      config.plugin('bundle-analyzer').use(BundleAnalyzerPlugin);
    }
  }
};

配置完成后，直接执行 vue-cli-service build 即可实现原命令的打包效果。

二、单独提取 iconfont.css 配置 #

要将 iconfont.css 从主 CSS 包中单独拆分，需调整 Webpack 的代码分割规则，在上述 chainWebpack 配置中添加以下内容：

// ... 保留前面的 Web Component 配置

// 自定义 CSS 文件输出路径与命名规则
config.plugin('extract-css').tap(args => {
  args[0].filename = 'css/[name].[contenthash:8].css';
  args[0].chunkFilename = 'css/[name].[contenthash:8].css';
  return args;
});

// 单独拆分 iconfont 相关样式文件
config.optimization.splitChunks({
  cacheGroups: {
    iconfont: {
      name: 'iconfont',
      // 匹配 iconfont 样式文件（根据你的实际文件路径调整正则）
      test: /iconfont\.(css|scss|sass)$/,
      chunks: 'all',
      enforce: true // 强制拆分，优先级高于其他缓存组规则
    }
  }
});

注意事项 #

• 如果你的 iconfont 文件存放在特定目录（如 src/assets/iconfont/），可将正则调整为 /src/assets/iconfont/.*\.(css|scss|sass)$/ 以精准匹配
• 打包完成后，iconfont.css 会单独输出到 dist/css/iconfont.[contenthash].css 路径下，可根据需求修改 filename 中的输出路径

内容的提问来源于stack exchange，提问作者LinKangJing