extract-text-webpack-plugin不提取CSS

Question

当我在CommonChunkPlugin的帮助下创建块时，extract-text-webpack-plugin不会从着陆块中提取CSS。 有任何想法吗？

config: {
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        chunks: [
            'vzr',
            'vzrProduct',
            'emptyProduct'
        ],
        async: 'landings'
    }),
    new ExtractTextPlugin({
        filename: '[name].[contenthash].css',
        allChunks: true
    })
  ]
}

Answer 1

Javascript Objects必须具有用冒号分隔的key和value 。 在您的情况下，您有一个plugins: {}并向其中插入一系列函数，我们可以称其为keys ，但是后面没有冒号和value而是逗号。

根据这个 plugins不是一个object ，但一个array的值。 因此，代替：

config: {
  plugins: {
    new webpack.optimize.CommonsChunkPlugin({
      chunks: [
        'vzr',
        'vzrProduct',
        'emptyProduct'
      ],
      async: 'landings'
  }),
  new ExtractTextPlugin({
    filename: '[name].[contenthash].css',
    allChunks: true
  })
}

}

而是：

config: {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      chunks: [
        'vzr',
        'vzrProduct',
        'emptyProduct'
      ],
      async: 'landings'
    }),
    new ExtractTextPlugin({
      filename: '[name].[contenthash].css',
      allChunks: true
    })
  }
]

Answer 2

我将函数添加到minChunk中，问题已解决。 CommonChunkPlugin停止提取CSS和更少的模块

config: {
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        chunks: [
            'kaskoLanding',
            'kaskoLandingProduct',
            'kaskoCalculator',
            'kaskoCalculatorProduct',
            'osagoCalculator',
            'osagoCalculatorProduct',
            'vzr',
            'vzrProduct',
            'emptyProduct'
        ],
        minChunks: (module, count) => {
            if (module.resource && (/^.*(css|less)$/).test(module.resource)){
                return false;
            }

            return count >= 9;
        },
        async: 'landings'
    }),
    new ExtractTextPlugin({
        filename: '[name].[contenthash].css',
        allChunks: true
    })
]

}