webpack 如何分离按需加载的组件的css内容

Question

以vue的单文件为例vue的路由组件可以按需加载,但是可以看到webpack打包后生成了一个css文件,和多个js文件,每个js文件对应相应的路由组件每个组件对应的css都打包进了一个css文件里面,但是组件是按需加载的,也就是有一些css内容是用不到的,那有没有方法让各个组件的css也能按需加载？

Answer 1

new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name].[content][hash].css'),

      allChunks: true,

    }),

如果你写的是css/main.css，就只会打包一个