webpack 打包 css

webpack 不会直接识别任何非 js 文件，包括 html 和 css 文件，所以我们才要用到 html-webpack-plugin 和 css-loader 等。

一、打包 .css 文件（一般形式）

这里我们使用 webpack 官方推荐方式，也以此作为起始方式———使用 css-loader 和 style-loader 。

• css-loader（官方解释）：

The css-loader interprets @import and url() like import/require() and will resolve them.
css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。

• style-loader（官方解释）：

Adds CSS to the DOM by injecting a <style> tag
将 css 以 <style /> 的形式注入到 DOM 当中

用法：

1.安装

npm i -D css-loader style-loader

2.配置 webpack.config.js

//css 加载（内联）
const cssRules = {
    test: /\.css$/,
    use: [{ loader: "style-loader" }, { loader: "css-loader" }]
};

module.exports = {
    entry:...,
    output: ...,
    module: {
        rules: [
            //内联式解决，图片外放
            cssRules
        ]
    },
};

这样，你已经指示了 webpack 在面对.css 文件时该如何解析了。
打包之后可以看到你写的 css 已经生效，并且这种做法不会生成 .css 文件，因为 css 代码已经被打包进 js 文件了，最终运行脚本时，把 css 处理为 <style /> 然后插入到 html 中。

二、打包 .png|.jpg|.gif 文件

我们常常会用到

{
  background:url(...);
}

上述的方式是无法将分离于 css、js 文件的图案媒体文件打包出来的，后果就是造成你虽然成功解释了 url(...)，但是却因为没有相关的输出文件而发生一个“not found”的错误。

• file-loader（官方解释）：

Instructs webpack to emit the required object as file and to return its public URL
指示 webpack 执行将需要的对象以文件的形式引入并返回其发布地址的动作。

• url-loader（官方解释）：

Loads files as base64 encoded URL
将文件以 base64 编码的形式进行 url 编码。

他们都可以将外部的非 js 文件打包到输出位置，区别就是 url-loader 可以将一些不超出规格的媒体文件编码进 js 文件，总大小不变但是减少了请求次数。
所以这里我使用 url-loader。

1.安装

npm i -D url-loader

2.配置 webpack.config.js

//css 加载（内联）
const cssRules = {
    test: /\.css$/,
    use: [{ loader: "style-loader" }, { loader: "css-loader" }]
};
//引入图片加载规则
const pictureRules= {
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: "url-loader",
            options: {
                limit: 8192,
                outputPath: "images/"
            }
        }
    ]
};
module.exports = {
    entry:...,
    output: ...,
    module: {
        rules: [
            //内联式解决，图片外放
            cssRules,
            pictureRules
        ]
    },
};

在 url-loader 的 options 中配置 outputPath 可以指定这些媒体文件输出到什么位置。

//index.js
import './style.css';

你现在可以内联式地引入所有你需要的 css 文件了。
如果你使用 react 当中需要配合 jsx 来引入某图片例如：

//render.js
import React from 'react';
import image from './path/xxx.png';

export default class Z extends React.Component{

  render(){
    return (<image src={image} />)
  }
}

这种配置同样可以满足你的 js 引入需求。

三、外挂式引入 css

如果你不喜欢把 css 以 <style/> 的形式引入，而一定要把 css 单独拎出来作 .css 文件的形式，那么你可以像这样操作：

配置 webpack.config.js

//css 加载（外挂）
const cssRules2 = {
    test: /\.css$/,
    use: [{ loader: "style-loader/url" }, { loader: "url-loader" }]
};
//引入图片加载规则
const pictureRules= {
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: "url-loader",
            options: {
                limit: 8192,
                outputPath: "images/"
            }
        }
    ]
};
module.exports = {
    entry:...,
    output: ...,
    module: {
        rules: [
            cssRules2,
            pictureRules
        ]
    },
};

这种做法同样是以脚本的方式将 css 以 <link/> 的形式插入到 html 文件中。并且生成 .css 文件到输出目录。但是这样做并不完整，因为 .css 文件中的 url() 会被直接抄过来，而不会随同打包后的位置和名称而变化，所以凡是带有 url() 的属性都会发生“not found”的错误，其他正常。
截至发稿日期，笔者还没有搞到一个明确而完美的方式来完全外挂 css。由于并非刚需，暂时不做深入研究，如有新进展，笔者将更新本文。

更多配置请参考
webpack 官网 css-loader
webpack 官网 style-loader
webpack 官网 url-loader
webpack 官网 url-loader

---

作者水平有限，如有错误，欢迎指正交流。

---