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教程