webpack基礎配置與css相關loader

Lyx發表於2022-06-30
WebCSS
本系列文章是我在學習webpack時的總結與收穫，希望我的一些學習內容可以幫助到一些正在學習 webpack 的朋友。本片文章為系列文章的第二篇，包含 webpack 基礎配置與 css 相關 loader

webpack的使用（01篇內容補充）

webpack安裝方式：

# 全域性安裝
npm install webpack webpack-cli -g
# 本地專案安裝
npm install webpack webpack-cli

如果我們直接在命令列中執行 webpack ，此時，它預設使用的全域性安裝的webpack以及webpack-cli，如果沒有全域性安裝這兩個東西，則就會報錯如下：

$ webpack --config wk.config.js
bash: webpack: command not found

如果在全域性也安裝了相同的依賴，那麼我們是可以直接執行該命令的

若想要使用本地專案中的 webpack、webpack-cli，有兩種方式：

  1. npx webpack --config wk.config.js ：該命令可以直接使用 node_modules/.bin/ 下的可執行檔案，使用的就是本地安裝的依賴
  2. npm run build ：該命令會執行 package.json 檔案中 scripts 下的 build 命令，此時會優先使用本地依賴，如果本地依賴不存在，則會使用全域性依賴

這一點也解釋了很常見的一個面試題：為什麼要執行 npm run xxx，而不直接執行其對應的指令

webpack 配置

webpack 配置檔案

webpack 的預設配置檔案為：webpack.config.js ，放在專案的根目錄下。但其實，webpack（我使用的webpack5的版本）提供了三種預設配置檔案的寫法，均位於專案根目錄下，自上而下優先順序遞減，如下所示：

  • webpack.config.js
  • .webpack/webpack.config.js
  • .webpack/webpackfile.js

如果不想使用預設配置檔案，可以自定義配置檔案，在package.json中，新增--config 自定義配置檔案路徑

"scripts": {
    "build": "webpack --config path"
}

在 webpack-cli/lib/webpack-cli.js 中可以檢視到相應程式碼：

if (options.config && options.config.length > 0) {
    // 讀取自定義配置檔案
    // options.config 中包含自定義配置檔案的路徑
    const loadedConfigs = await Promise.all(
    options.config.map((configPath) => {
      return loadConfigByPath(path.resolve(configPath), options.argv)
    }
    ),
  );
} else {
    // 預設配置檔案路徑
    // Order defines the priority, in decreasing order
    const defaultConfigFiles = [
        "webpack.config",
        ".webpack/webpack.config",
        ".webpack/webpackfile"
    ]
}

自定義配置檔案

webpack 基礎配置

這部分內容包含entry、output以及module的簡單配置，更為複雜的配置例如多入口、hashname等將在後續文章中逐步講解

entry：表示打包檔案的入口，用相對路徑表示

module.exports = {
    // src 下的 index.js 檔案為打包的入口檔案
    entry: './src/index.js'
}

outptut：打包檔案輸出配置。輸出檔案路徑 path 是一個絕對路徑

module.exports = {
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './build')
    }
}

module: 主要用來配置 loader 選項，其寫法結構如下：

module.exports = {
    module: {
        rules: [
        
        ]
    }
}

rules 當中存放的是 Rule 物件，Rule 物件可以分為三個部分：

  • Rule Conditions: 用來匹配對應的檔案。例如，使用test、include、exclude等結合正規表示式匹配 css、less、jpg檔案
  • Rule results: 使用的loader，常用的屬性有loader、options、use。use 屬性對應一個陣列，陣列中存放一個個物件，這些物件就是具體使用的loader。其中，loader屬性為字串，options 屬性為字串或物件，其會被傳入到 loader 中
  • Nested rules: 在屬性規則下指定巢狀規則

具體寫法有三種：

第一種寫法：最完整的寫法

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,  // 使用正規表示式進行匹配
                use: [
                    {loader: 'css-loader'， options: {}}
                ]
            }
        ]
    }
}

第二種寫法：當只有一個loader時，可以採取這種簡寫方式

module.exports = {
    module: {
        rules: [
            {
                 test: /\.css$/,  // 使用正規表示式進行匹配
                 loader: 'css-loader'
            }
        ]
    }
}

第三種寫法：省略 loader 屬性，直接寫 loader 的名稱，可以在不配置 options 屬性的情況下使用這種簡寫方式

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,  // 使用正規表示式進行匹配
                use: [
                    'css-loader'
                ]
            }
        ]
    }
}

css 相關 loader 配置

css-loader

css-loader 只用來載入css檔案，並不會將解析之後的css插入到頁面，因此，打包之後的HTML中樣式並不會發生變化

Untitled.png

此時，可以看到並沒有以style標籤或行內樣式的方式插入CSS，所以，CSS不會生效

style-loader

若想要 css-loader 處理後的樣式插入到頁面中，還需要另外一個loader, style-loader。style-loader 負責在頁面中建立一個style標籤，並將處理好的樣式插入其中，這樣我們才能在頁面上看到樣式發生變化。

Untitled (1).png

需要注意的是 loader 的執行順序問題。在 webpack 中，當需要多個 loader 時，按照自下向上的順序執行

css-loader 用來載入 css 檔案，style-loader 將處理好的 css 插入到頁面中，因此，css-loader 在 style-loader 之前執行

module.exports = {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }
    ]
}

如何處理 less 等 css 預處理檔案？

在開發中，經常使用less、sass、stylus前處理器來編寫 css 樣式，那麼 如何去支援這些前處理器呢？因此，需要將前處理器樣式檔案 轉為 css 檔案，再處理 css 檔案

less

npm install less less-loader --save-dev

sass

npm install sass-loader sass webpack --save-dev

注意，真正將 less 檔案轉為 css 檔案的是我們安裝的 less 工具，這個工具與 webpack 沒有關係，而less-loader 會自動呼叫 less 包，對 less 檔案進行處理

執行 npx less ./src/css/component.less > component.css 可以將less 檔案轉為 css 檔案

Untitled (2).png

less 檔案處理配置

module.exports = {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }
    ]
}

相關文章