目录
Webpack 2.2 中文文档
代码拆分 – CSS
要通过webpack打包CSS,像任何其他模块一样将CSS导入JavaScript代码,并使用css-loader(它输出CSS作为JS模块),并可选地应用ExtractTextWebpackPlugin(它提取打包的CSS并输出CSS文件)。
导入 CSS
像JavaScript模块一样导入CSS文件,例如在vendor.js中:
import 'bootstrap/dist/css/bootstrap.css';
使用 css-loader
在 webpack.config.js 中配置 css-loader , 如下:
module.exports = { module: { rules: [{ test: /\.css$/, use: 'css-loader' }] } }
结果,CSS和您的JavaScript打包在一起。
这有个缺点,您将无法利用浏览器的异步和并行加载CSS的能力。这样,您的网页必须等待,直到您的整个JavaScript 包下载完成,然后重绘网页。
webpack可以通过使用ExtractTextWebpackPlugin分别打包CSS来帮助解决这个问题。
使用 ExtractTextWebpackPlugin
安装 ExtractTextWebpackPlugin 插件,如下:
npm i --save-dev extract-text-webpack-plugin@beta
要使用此插件,只需要在webpack.config.js文件中添加两个步骤。
module.exports = { module: { rules: [{ test: /\.css$/, - use: 'css-loader' + use: ExtractTextPlugin.extract({ + use: 'css-loader' + }) }] }, + plugins: [ + new ExtractTextPlugin('styles.css'), + ] }
通过上述两个步骤,您可以专门为所有CSS模块生成新的bundle,并将它们作为单独的标记添加到index.html中。
上一篇: 代码拆分(Code Splitting) 下一篇: 代码拆分 – 库(Libraries)