每个 webpack 块提取一个 css 文件 (require.ensure)

Question

在我们的应用程序中尝试实现页面优化时，我们希望能够为每个 webpack 块生成单独的 CSS 文件，以提高我们应用程序中第一页的页面渲染性能。为实现这一目标，我们一直在尝试将 extract-text-plugin 与 require.ensure 结合使用，如下所示：

const $ = require('load-webpack-plugins')();
module.exports = {
  entry: { 'app': './src/app.js' },
  output: {
    path: 'dist',
    filename: '[name].js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.js$/, use: [{ loader: 'babel-loader' }] },
      {
        test: /\.css$/,
        use: $.ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{ loader: 'css-loader' }]
        })
      }
    ]
  },
  plugins: [
    new $.ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: true }),
    new $.NamedModulesPlugin(),
  ]
}

其中 app.js 为：

console.log('this is app.js');

require.ensure([], require => {
  require('./a.css');
}, 'base');

require.ensure([], require => {
  require('./b.css');
}, 'first');

require.ensure([], require => {
  require('./c.css');
}, 'second');

和a.css是：

.a {
  color: red;
}

和b.css是：

.b {
  color: red;
}

和c.ss是：

.c {
  color: red
}

问题是我们只有一个 CSS 文件 dist/app.e2e9da337e9ab8b0ca431717de3bea22.css 包含所有 3 个块的内容：

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: red
}


/*# sourceMappingURL=app.e2e9da337e9ab8b0ca431717de3bea22.css.map*/

在这种情况下，我们如何为每个 webpack 块 (require.ensure) 提取一个 css 文件？这是否应该由 extract-text-plugin 支持。

PS：这是一个演示此问题的示例存储库 -- https://github.com/osdevisnot/extract-text-demo

Answer 1

extract-text-plugin 不提取分割点。
通过传递 {allChunks: true} 它提取所有块中的所有 css 并放入一个 css 文件中。
但这并不能解决你的问题。

为此，您可以尝试 extract-css-chunks-webpack-plugin 使用 extract-text-plugin 专门为此用例构建。

每个 webpack 块提取一个 css 文件 (require.ensure)

extracting one css file per webpack chunk (require.ensure)

webpack

extract-text-plugin

extracttextwebpackplugin