webpack入门学习笔记05 —— 使用webpack打包编译css文件

时间  2019-11-29
标签 webpack 入门 学习 笔记 使用 打包 编译 css 文件 栏目 CSS 繁體版
原文   原文链接

1. 写在前面

在前面的博客中，对webpack打包项目进行了简单介绍，并且都是关于打包编译 .js 文件的介绍。咱们知道在一个基于webpack的项目中，确定不止是 .js 文件，还有 .html 、.css、.png 等文件，在后面的博客中会给你们一一讲述，在这篇博客中，咱们就介绍如何使用webpack打包编译 .css 文件。css

主要内容包括：html

  • 如何在项目中引入 .css 文件webpack

  • 打包编译 .css 文件css3

  • 打包编译 .less 文件web

  • 将css代码抽离为单个文件正则表达式

  • 给打包编译后的css3属性添加相关前缀shell

  • 压缩编译后的 .css 文件npm

2. 如何在项目中引入 .css 文件

以前咱们提到过，webpack会对项目中的项目文件进行打包编译，而后将生成的文件挂载到一个 .html 模板文件中。这个时候若是要引入css样式，你可能会想：我将css样式直接写到 .html 模板文件中，或者将 .css 文件挂载到模板文件中，不就好了吗。例以下面的代码：数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> body { background-color: red; color: yellow; } </style>
</head>
<body>

    <h1>这是一个模板文件</h1>
    
</body>
</html>
复制代码

首先从功能上分析，这种方式是可行的，不管你是使用 yarn dev 来启动开发服务器，仍是使用 yarn build 来打包编译项目，最终你写的样式都是会存在，会起做用的。可是这种方法很是很差，也不规范，因此很是不推荐使用这种方式。那么该怎么来引入css代码呢？服务器

若是你是使用 Vue脚手架 或者 React脚手架 来构造项目的话，那么直接参考他们的官方教程来写css样式便可，若是你是从零手动搭建的项目，那么能够在 .js 文件中引入 .css 文件，例以下面的实例：

// index.js 文件
console.log('我是 index.js 文件');

require('./index.css')  // 引入 .css 样式文件

require('./b.less')     // 引入 .less 样式文件
复制代码
/* index.css 文件 */
body {
    background-color: red;
    color: yellow;
}
复制代码
/* b.less 文件 */
body {
    border: 5px solid #45454;
    div {
        font-size: 20px;
        font-weight: bolder;
    }
}
复制代码

如今咱们已经将 .css 文件和 .less 文件引入到项目中，可是这个时候，若是咱们启动本地开发服务器或者打包编译项目，确定会报错。

这是由于咱们尚未进行相关的配置，webpack还不知道如何处理这些引入的文件。所及接下来要说的就是如何进行配置，使得webpack能够进行打包编译样式文件。

3. 打包编译 .css 文件

webpack之因此可以打包编译项目中各式各样的文件，是由于它借助了不少功能强大的插件或者模块。因此若是咱们想打包编译 .css 文件，首先安装两个loader模块： css-loader 和 style-loader 。安装命令以下：

yarn add css-loader style-loader -D
复制代码

安装完成以后，咱们要在 webpack.config.js 文件中进行配置，这里咱们先给出标准的配置代码，而后再详细讲解（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",    
    entry: "./src/index.js",   
    output: {       
        filename: "index.js",   //
        path: path.resolve(__dirname, "build")   
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
    ],
    module: {       // 配置 webpack 使用到的模块
        rules: [
            {
                test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ],
    }
}
复制代码

在上面代码中，咱们增添了 module 属性，该属性是一个对象，它里面又有一个 rules 属性，该属性是一个数组。在这个数组中，咱们能够配置不少规则，分别指定对各类文件处理的程序（好比使用哪一种loader进行处理等）。这里咱们首先配置对 .css 的处理规则。

在 rules 数组中配置规则很简单，直接添加一个对象便可。如上面代码所示，咱们要配置处理 .css 文件的规则，能够添加如下对象：

{
    test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
    use: [
        'style-loader',
        'css-loader'
        ]
}
复制代码

该对象有两个属性：test 和 use

  • test 属性是用来匹配文件的，通常咱们使用正则表达式来匹配文件，上面代码中 /\.css$/ 就是匹配以 .css 结尾的文件。

  • use 属性指定使用哪些程序，来对匹配到的文件进行处理。该属性是一个数组，这是由于对一个文件进行处理的时候，可能会用到多种程序。好比上面的代码中，咱们制定使用 style-loader 和 css-loader 两种程序来处理 .css 文件，就须要将这两个程序写到数组中。

    须要注意的是，这个数组中程序的顺序不能随便写，由于对文件进行处理的时候，webpack会按照从后向前的顺序，依次使用指定的程序来处理文件。

    好比在处理index.css文件的时候，要先使用 css-loader 处理css语法，而后在使用 style-loader 将处理后的css挂载到 index.html 模板文件中。在写 use 属性的时候，就要将 style-loader 写在前面，将 css-loader 写在后面。

    最后还想说的一点是，该属性中不只能够写字符串，还能够写对象，用来更深次地配置处理文件的loader程序。好比：若是你想将处理好的 css 挂载到模板文件的顶部，能够这样配置：

    {
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader',
            options: {
                insertAt: 'top'	// 将编译后的css挂载到模板文件的顶部
            }
        },
        'css-loader'
    ]
},
复制代码

    若是在指定属性的时候不知道如何书写，能够这些loader程序的官方文档，好比 style-loaderde 官方文档 。

配置完这些规则以后，使用 yarn dev 启动本地开发服务器或者使用 yarn build 对项目进行打包编译，webpack就能够顺利地使用咱们配置的规则处理 .css 文件了。

4. 打包编译 .less 文件

若是项目中使用到了 less语法（一门 CSS 预处理语言 ） ，咱们就要进行相关配置 .less 文件的处理规则。和处理 .css 文件相似，应该安装两个模块：less 和 less-loader。安装命令以下：

yarn add less less-loader -D
复制代码

配置的方法和上面讲到的方法一模一样，因此这里直接给出配置的代码（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",   
    entry: "./src/index.js",    
    output: {        
        filename: "index.js",    
        path: path.resolve(__dirname, "build")    
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
    ],
    module: {       // 配置 webpack 使用到的模块
        rules: [
            {
                test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'       // less-loader将less语法转成常规的css语法
                ]
            }
        ],
    }
}
复制代码

配置完成以后，重启开发服务器或者从新打包编译，.less 文件就能够顺利地被编译。

5. 将css代码抽离为单个文件

如前面所提到的那样，webpack会打包编译 .css 文件或者 .less 文件，将处理后的css代码挂载到模板文件中，可是有的时候咱们不但愿这样。咱们但愿将处理后的css代码输出到一个指定的文件中，而后在模板文件中 自动引入 该文件。若是要达到这个目的，能够进行以下配置：

首先安装一个插件 mini-css-extract-plugin， 安装命令以下：

yarn add mini-css-extract-plugin -D
复制代码

安装完成以后，直接进行以下配置便可（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin') // 引入插件

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "build")
    },
    plugins: [		// 配置插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({ 		// 建立该插件的实例
            filename: 'main.css' 	// 指定输出的css文件的文件名
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
}
复制代码

配置完成以后，直接 yarn build 进行打包编译项目，就会获得一个 main.css 文件，该文件中就是编译后的css代码，实例以下。

/* main.css 文件 */
body {
    color: yellow;
}
body {
    background-color: gray;
    transform: rotate(45deg)	/* 注意这一行css3代码，没有添加前缀，后面会提到 */
}
body {
  border: 5px solid #4545 4;
}
body div {
  font-size: 20px;
  font-weight: bolder;
}
复制代码

关于这一块的更多配置，能够参考 mini-css-extract-plugin 官方文档

6. 给打包编译后的css属性添加相关前缀

如上面展现的 main.css 代码所示，打包编译后的代码中，对一些 CSS3 属性没有添加相应的前缀，这在一些状况下可能不能知足项目的需求。若是咱们想要达到自动给编译后的 CSS3 属性添加前缀，能够进行以下配置：

首先安装两个loader程序： postcss-loader 和 autoprefixer 。安装命令以下：

yarn add postcss-loader autoprefixer -D
复制代码

安装完成时候，首先配置 webpack.config.js 文件，实例以下（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')

module.exports = {
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'        // 给CSS3属性添加前缀
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'    	// 给CSS3属性添加前缀
                ]
            }
        ]
    }
}
复制代码

在上面代码中，咱们指定了使用 postcss-loader 来处理 .css 和 .less 文件，可是如今webpack还不能自动给CSS3属性添加前缀，咱们还须要进行配置postcss-loader。在项目根目录下建立 postcss.config.js 文件，在里面书写如下配置代码便可：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
复制代码

这个时候打包编译，webpack就能够自动给CSS3属性添加前缀了，实例以下：

/* main.css 文件 */
body {
    color: yellow;
}
body {
    background-color: gray;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
}
body {
  border: 5px solid #4545 4;
}
body div {
  font-size: 20px;
  font-weight: bolder;
}
复制代码

7. 压缩编译后的 .css 文件

在上一节中，咱们能够看到，抽离出来的 main.css 文件没有进行压缩，可是不少项目在打包的时候，都须要对 .css 文件进行压缩以节省体积。要达到这个目的，能够进行以下配置：

首先安装一个插件：optimize-css-assets-webpack-plugin 。安装命令以下：

yarn add optimize-css-assets-webpack-plugin -D
复制代码

安装完成以后，直接在 webpack.config.js 进行以下配置便可（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');    // 引入插件

module.exports = {
    optimization: {     					// 配置webpack的优化项
        minimizer: [    					// 配置最小值优化项
            new OptimizeCSSAssetsPlugin()   // 声明css优化插件的实例
        ]
    },
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'       
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'    
                ]
            }
        ]
    }
}
复制代码

配置完成以后，再次进行打包编译项目，就会获得被压缩的 main.css 文件。

要提醒的是，在上述配置中，虽然咱们指定webpack的模式为 生产模式（production）,该模式下，打包后的 .js 文件本应该被压缩，可是实际的状况却不是这样，获得的 .js 文件没有被压缩。

这是由于咱们在配置 webpack优化项（optimization） 的时候，一些优化配置会覆盖webpack的默认配置。咱们这里没有指定压缩 .js 文件，因此即便是在生产模式下进行打包编译，最后获得的 .js 文件依然是没有被压缩的。

若是要对 .js 文件进行压缩，也是很是简单，和配置 .css 文件压缩的一模一样。具体配置以下：

首先安装一个插件：terser-webpack-plugin ，安装命令以下：

yarn add terser-webpack-plugin -D
复制代码

而后进行和上面相似的配置（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');   
let TerserJSPlugin = require('terser-webpack-plugin');      // 引入插件

module.exports = {
    optimization: {                         // 配置webpack的优化项
    minimizer: [                            // 配置最小值优化项
            new OptimizeCSSAssetsPlugin(),
            new TerserJSPlugin()            // 声明js压缩插件的实例
        ]
    },
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },

    // 节省篇幅，后面的一些配置我就不写了，和上面的同样
}
复制代码

如今再次进行打包，获得的 .js 文件就是被压缩的。

8. 写在最后

这篇博客的内容可能会多一点，主要讲解如何在webpack中配置对 .css 文件进行处理的规则。但愿会对你们有所帮助。

上一篇: webpack入门学习笔记04 —— 安装和配置webpack开发服务器

下一篇: webpack入门学习笔记06 —— 使用babel打包编译js文件

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程