css - Webpack 正在导入其他包的 CSS

Question

我有一个 Webpack 设置来构建不同的包，并将包使用的所有 CSS 放在一个 CSS 文件中。
问题是 Webpack 将所有包的所有 CSS 放在一起。
Mi元素的配置方式如下。
webpack.config.js

module.exports = {
  entry: {
    'bundle-a': './src/bundle-a.ts',
    'bundle-b': './src/bundle-b.ts'
  },
  ...
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        include: path.resolve(__dirname, 'src'),
        use: ['ts-loader']
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: 'local'
            }
          }
        ]
      }
    ]
  }
};

src/bundle-a.ts

import style from './bundle-a.css';

...

src/bundle-a.css

.class-bundle-a {
  ...
}

源代码/捆绑-b.js

import style from './bundle-b.css';

...

源代码/捆绑-b.css

.class-bundle-b {
  ...
}

当我构建元素时，我得到以下 CSS 文件。
dist/bundle-a.css

.class-bundle-a {
  ...
}

.class-bundle-b {
  ...
}

dist/bundle-b.css

.class-bundle-a {
  ...
}

.class-bundle-b {
  ...
}

我希望dist/bundle-a.css仅在 src/bundle-a.ts 中导入 CSS ，但我也得到了由 src/bundle-b.ts 导入的 CSS ，以及与 src/bundle-b.css 相同的通行证.如果我使用 ，也会发生同样的情况样式加载器 .
我想知道这是预期的行为还是我的代码中有一些错误。

Answer 1

您可以尝试使用 postcss带 cssnano 的装载机也。
这样做的目的是优化您的 css 文件导入。
cssnano 优化之一是丢弃重复项 cssnano#discardDuplicates
你可以尝试在你的 webpack.config.js 中这样使用:

...
rules: [
  ...
  {
    test: /\.css$/i,
    exclude: /node_modules/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: path.resolve(__dirname, '../dist/css/')
        }
      },
      {
        loader: 'css-loader',
        options: {importLoaders: 1},
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            config: path.resolve(__dirname, 'postcss.config.js'),
          },
        },
      },
    ],
  },
  ...

并为您的 postcss ( postcss.config.js ) 创建一个文件，如下所示:

module.exports = {
  plugins: {
    'cssnano': {
      autoprefixer: { add: true },
      discardComments: { removeAll: true },
      discardDuplicates: true,
      discardEmpty: true,
      discardOverridden: true,
      discardUnused: true,
      reduceIdents: false,
      reduceInitial: false,
      reduceTransforms: false,
      zindex: false
    }
  }
}