二、extract-text-webpack-plugin插件
从 bundle 中提取文本(CSS)到单独的文件
安装
npm install extract-text-webpack-plugin --save-dev
用法
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new ExtractTextPlugin("styles.css"), ] }
它会将所有的入口 chunk(entry chunks)中引用的 *.css
,移动到独立分离的 CSS 文件。
因此,你的样式将不再内嵌到 JS bundle 中,而是会放到一个单独的 CSS 文件(即 styles.css
)当中。
如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。