webpack筆記05 —— 使用webpack打包編譯css文件

時間  2021-08-14
標籤 css html webpack css3 web 正則表達式 數組 服務器 less ide 欄目 CSS 简体版
原文   原文鏈接

1. 寫在前面

在前面的博客中，對webpack打包項目進行了簡單介紹，並且都是關於打包編譯 「.js」 文件的介紹。咱們知道在一個基於webpack的項目中，確定不止是 「.js」 文件，還有 「.html」 、「.css」、「.png」 等文件，在後面的博客中會給你們一一講述，在這篇博客中，咱們就介紹如何使用webpack打包編譯 「.css」 文件。css

主要內容包括：html

  • 如何在項目中引入 「.css」 文件webpack

  • 打包編譯 「.css」 文件css3

  • 打包編譯 「.less」 文件web

  • 將css代碼抽離爲單個文件正則表達式

  • 給打包編譯後的css3屬性添加相關前綴數組

  • 壓縮編譯後的 「.css」 文件服務器

2. 如何在項目中引入「.css」文件

以前咱們提到過，webpack會對項目中的項目文件進行打包編譯，而後將生成的文件掛載到一個「.html」 模板文件中。這個時候若是要引入css樣式，你可能會想：我將css樣式直接寫到「.html」 模板文件中，或者將 「.css」 文件掛載到模板文件中，不就好了嗎。例以下面的代碼：less

<!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代碼呢？ide

若是你是使用 「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」 文件進行處理的規則。但願會對你們有所幫助。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程