原文为线上开源的英文书籍。你可以点击这里阅读原书籍。
本篇对应书本第三篇,讲了如何处理css。
webpack 无法对 css 做到开箱即用,需要配置对应的 loaders 和 plugins 来处理 css 文件。
加载css
加载css文件需要使用到 css-loader 和 style-loader。 css-loader 能让 webpack 可以正常去寻找引入使用 @import
和 url()
方式引入的文件,style-loader则是把 css 文件以行内式(style标签+样式)的方式加载到 html 中。
引入两个loader并添加对应的配置:
// bash
npm add css-loader style-loader --develop
// webpack.parts.js
exports.loadCSS = ({
include, exclude } = {
}) => ({
module: {
rules: [
{
test: /\.css$/,
include,
exclude,
use: ["style-loader", "css-loader"],
},
],
},
});
// 加入到webpack.config.js
const commonConfig = merge([
// ...
parts.loadCSS(),
]);
webpack为各个流行的css库提供了对应的loaders。比如 less 对应 less-loader
,sass有 sass-loader
,Stylus有 stylus-loader
。
值得一提的是 css-loader 默认只支持相对路径,不支持绝对路径,比如下面两种方式:
url("https://mydomain.com/static/demo.png")
url("/static/img/demo.png")
分割css
经过上面的配置我们发现 css 文件会以行内式的方式插入的 html 中,这个插入动作实际上是 loaders 放到 js 当中去做了。这样子在开发中能够处理,但在产品打包上线之后不是一个很好的处理方式,我们需要把 css 单独分割出来作为一个文件。这里就要用到 webpack 的 mini-css-extract-plugin
的 plugins。
// bash
npm add mini-css-extract-plugin --develop
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// webpack.parts.js
exports.extractCSS = ({
options = {
}, loaders = []