DaMeng

Webpack 处理 CSS

发表于 更新于 分类于 ，

在 webpack 中，根据项目需要，可能会需要下面 loader 来处理 css。

css-loader

css-loader 可以解析 import require @import url 对 css 文件的引用，将 css 文件转换成 webpack 可以识别的 js 模板，转换后内容如下：

1
2
3
4
5
6
7
8
9
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ "../node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, "body {\r\n\tbackground-color: red;\r\n}\r\n", ""]);
// Exports
module.exports = exports;


  • 安装

    1
    npm install --save-dev css-loader

  • 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
    };

style-loader

可以将转换后的 css 文件插入到 html 文件中，默认以 style 的方式插入。

  • 安装

    1
    npm install --save-dev style-loader

  • 配置

    • 默认以 style 形式插入 html 文件

      1
      2
      3
      4
      5
      6
      7
      8
      module: {
      		rules: [
      			{
      				test: /\.css$/,
      				use: ["style-loader", "css-loader"],
      			},
      		],
      	},

    • 如果想以 link 的方式插入，则可以参考如下配置：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      module: {
      		rules: [
      			{
      				test: /\.css$/,
      				use: [
      					{
      						loader: "style-loader",
      						options: {
      							injectType: "linkTag",
      						},
      					},
      					"file-loader",//css-loader->file-loader
      				],
      			},
      		],
      	},

less-loader

可以将 less 转换成 css 。

  • 安装

    1
    npm install less-loader --save-dev

  • 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    module: {
    	rules: [
    		{
    			test: /\.css$/,
    			use: ["style-loader", "css-loader"],
    		},
    		{
    			test: /\.less$/,
    			use: ["style-loader", "css-loader", "less-loader"],
    		},
    	],
    },

postcss-loader

使用 postcss-loader 可以对 css 进行后置处理，如添加兼容各个浏览器的前缀等。

postcss-loader 内部其实是通过其他插件完成各个功能的。

  • 安装
1
npm i postcss-import postcss-preset-env cssnano postcss-loader -D

  • 使用

    • 项目根目录创建 postcss.config.js 配置文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
       module.exports = {
       //	parser: "sugarss",
       	plugins: {
               //postcss-import：通过 @import，整合多个 CSS 文件
       		"postcss-import": {},
               //postcss-preset-env： 支持现代的 css 语法。
       		"postcss-preset-env": {},
               //cssnano： 可以压缩 css 代码
       		cssnano: {},
      },
       };

    • webpack.config.js 中配置 postcss-loader

      1
      2
      3
      4
      5
      6
      7
      8
      module: {
      		rules: [
      			{
      				test: /\.(less|css)$/,
      				use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      			},
      		],
      	},

MiniCssExtractPlugin

使用 MiniCssExtractPlugin 可以将 CSS 提取到单独的文件。为每个包含 CSS 的文件单独创建一个 CSS 文件。

安装

1
npm install --save-dev mini-css-extract-plugin

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//1、引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
	},
	mode: "development",
	module: {
		rules: [
			{
				test: /\.(less|css)$/,
				use: [
					MiniCssExtractPlugin.loader, //2、使用插件的 loader
					"css-loader",
					"postcss-loader",
					"less-loader",
				],
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			filenmame: "index.html",
			template: "./tpl.html",
		}),
		new MiniCssExtractPlugin(),//3、创建插件实例
	],
};

参考：

https://segmentfault.com/a/1190000020293006