webpack - 为什么在使用 MiniCssExtractPlugin 时将 Bootstrap CSS 与 Javascript 捆绑在一起？

Question

我正在尝试生成供应商 CSS 和 Javascript，但出现了问题。供应商 Css 包含在 Css 和 Javascript 包中。

这是我的 webpack 配置：

module.exports = (env) => {

  const optimization = {
    noEmitOnErrors: true,
    splitChunks: {
      cacheGroups: {
        polyfills: {
          name: 'polyfills',
          test: /polyfills|core-js|zone/,
          chunks: 'initial',
          priority: 2,
          enforce: true,
        },
        vendors: {
          name: 'vendors',
          test: /node_modules/,
          chunks: 'all',
          priority: 1,
          enforce: true,
        },
        appStyles: {
          name: 'app',
          test: (m, c, entry = 'app') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
        vendorsStyles: {
          name: 'vendors',
          test: (m, c, entry = 'vendors') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        }
      }
    },
  };

  return {
    optimization,
    devtool: 'source-map',
    entry: {
      app: helpers.root('/client/src/main.ts'),
      vendors: helpers.root('/client/src/vendors.ts'),
      polyfills: helpers.root('/client/src/polyfills.ts'),
    },
    output: {
      path: helpers.root('/client-dist'),
      filename: '[name].js',
    },
    resolve: {
      extensions: ['.ts', '.js'],
      modules: [
        helpers.root('/client/src'),
        helpers.root('/node_modules'),
      ],
      alias: rxPaths(),
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: ['ts-loader', 'angular2-template-loader'],
          include: helpers.root('/client/src'),
        },
        {
          test: /\.html$/,
          use: ['html-loader'],
          include: helpers.root('/client/src'),
        },
        {
          test: /\.css$/,
          use: [
            CssExtractPlugin.loader,
            'css-loader',
          ],
          include: helpers.root('/node_modules/bootstrap'),
        },
        {
          test: /\.less$/,
          use: [
            CssExtractPlugin.loader,
            'css-loader',
            'less-loader',
          ],
          include: helpers.root('/client/src/assets/styles'),
        },            
      ],
    },
    plugins: [
      new CleanPlugin(['client-dist'], {root: helpers.root('/')}),
      new webpack.LoaderOptionsPlugin({debug: true}),
      new webpack.ContextReplacementPlugin(/@angular\/core\/fesm5/, helpers.root('/client/src')),
      new webpack.optimize.ModuleConcatenationPlugin(),
      new CssExtractPlugin({filename: 'assets/styles/[name].css'}),
      new HtmlPlugin({template: helpers.root('/client/src/index.html')}),
    ],
  };
};

这是 vendor.ts 条目：

import 'bootstrap/dist/css/bootstrap.min.css';

这导致 vendor.css 包含 bootstrap.min.css，但 bootstra.min.css 也包含在 vendor.js 中。我怎么能把这个分开？

Answer 1

我想出了我的问题。因为css-loader我已modules设置为true将引导 css 添加到 JavaScript 供应商文件中。

{
    test: /\.s?[ac]ss$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                modules: false, // If this is true then I see the issue
                camelCase: 'dashes',
                minimize: isProduction,
                sourceMap: !isProduction,
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: !isProduction
            }
        },
    ]
}

Answer 2

好的，这似乎是我用来检查包的 Webpack 包分析器工具中的一个错误。

但是 bootstrap.min.css 已从 vendor.js 中删除：