小编osd*_*not的帖子

在尝试在我们的应用程序中实现页面优化时,我们希望能够为每个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'); …