Webpack多入口项目如何为每个入口提取对应CSS？

1. 修正多入口与CSS打包配置 #

在vue.config.js中调整Webpack配置，确保每个入口的CSS独立打包，避免合并到公共vendor：

const { defineConfig } = require('@vue/cli-service')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

module.exports = defineConfig({
  configureWebpack: {
    // 明确多入口映射
    entry: {
      entry1: path.resolve(__dirname, './src/entry1.js'),
      entry2: path.resolve(__dirname, './src/entry2.js')
    },
    plugins: [
      new MiniCssExtractPlugin({
        // 按入口名生成独立CSS文件，[name]对应entry1/entry2
        filename: 'css/[name].[contenthash:8].css',
        chunkFilename: 'css/[name].[contenthash:8].chunk.css'
      })
    ],
    optimization: {
      splitChunks: {
        // 仅处理异步加载的模块，不合并入口同步引入的CSS到公共chunk
        chunks: 'async',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'async'
          }
        }
      },
      // 给每个入口生成独立runtime文件，避免资源引用混乱
      runtimeChunk: {
        name: entrypoint => `runtime-${entrypoint.name}`
      }
    }
  },
  // 关闭Vue CLI默认的CSS提取逻辑，改用自定义插件控制
  css: {
    extract: false
  }
})

2. 规范入口文件的CSS引入 #

确保每个入口只引入自身所需的CSS：

• src/entry1.js：

import { createApp } from 'vue'
import App1 from './App1.vue'
import './css/css1.css' // 仅引入entry1专属样式

createApp(App1).mount('#app')

• src/entry2.js：

import { createApp } from 'vue'
import App2 from './App2.vue'
import './css/css2.css' // 仅引入entry2专属样式

createApp(App2).mount('#app')

3. 关键配置说明 #

• MiniCssExtractPlugin：通过[name]占位符绑定入口名，让每个入口的同步CSS生成独立文件，不会混入公共vendor。
• splitChunks调整：将chunks设为async，只提取异步加载的公共依赖，避免把各入口的同步CSS强制合并到公共chunk。如果需要提取入口间的公共CSS，可以单独配置cacheGroups，但需精准匹配公共样式，避免全局合并。
• 关闭默认CSS提取：Vue CLI默认的css.extract会把所有CSS合并到公共文件，必须关闭后才能用自定义插件实现分入口打包。

4. 验证打包结果 #

执行npm run build后，dist/css目录会生成entry1.xxx.css和entry2.xxx.css，对应的entry1.html仅引入entry1的CSS，entry2.html仅引入entry2的CSS，vendor.css中不会包含这两个入口的自定义样式。

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