webpack指南-webpack介绍-代码分割 - CSS

要使用webpack打包CSS，像其他任一模块一样将CSS代码导入到你的JS代码中，然后使用css-loader（将CSS输出为JS模块），再选择性地使用ExtrackTextWebpackPlugin（提取打包的CSS并输出CSS文件）。

导入CSS

就像导入JS模块一样导入CSS文件，例如vendor.js所示：

使用css-loader

在webpack.config.js中如下图所示配置css-loader:

结果是，CSS和JS打包在一起。

这种方式有一个缺点，就是你无法利用浏览器异步并行加载CSS的能力。取而代之的是，页面需要等待整个JS包加载完毕来加载样式。

webpack可以通过使用ExtrackTextWebpackPlugin分别地打包CSS来解决这个问题。

使用ExtrackTextWebpackPlugin

安装ExtrackTextWebpackPlugin

npm i --save-dev extract-text-webpack-plugin

使用这个插件需要在webpack.config.js中进行两步操作：

完成后，你就可以为所有CSS模块生成新的包并在index.html中用不同的tag引入他们。

。