webpack，迈出你的第一步-2

原文为线上开源的英文书籍。你可以点击这里阅读原书籍。
本篇对应书本第三篇，讲了如何处理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 = []