作一個 「Webpack 配置工程師」

長文慎讀

認識 Webpack

Webpack 是一個模塊打包工具。

簡單舉個例子🌰

新建三個文件，以下：

上面的例子會報錯：

由於瀏覽器並不支持 JS 的模塊化導入。這時候 Webpack 便派上用場了。

事實上，已經有不少瀏覽器開始支持 JS 的模塊化了，你能夠在 <script> 標籤中加入 type="module" 屬性 ，而且將項目運行在服務器上便可。

第一次接觸 Webpack

上面的例子中，咱們能夠將 test.js 和 index.js 打包成一個文件 main.js ，而後在 index.html 引入 main.js。

📦 Webpack 能夠幫咱們生成這個 main.js 文件。

咱們看一下怎麼作。

首先使用 npm init -y 快速生成 package.json 。而後安裝 webpack 和 webpack-cli 。

npm init -y
npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org
複製代碼

--registry=https://registry.npm.taobao.org表示使用淘寶的鏡像源，能夠加速安裝過程。

接着，

npx webpack index.js
複製代碼

便會生成 dist 目錄及 main.js ：

能夠在 HTML 文件中引用 ./dist/main.js 。

npx 會在項目中的 node_modules 目錄中尋找 webpack。

Webpack 除了能夠打包 JS 文件，還能夠打包 CSS 文件 、圖片等。

配置文件

事實上，咱們還能夠指定打包生成的目錄及文件名。這就用到 webpack 配置文件了。

咱們在項目根目錄下建立 webpack.config.js：

const path = require('path')

module.exports = {
    entry: './index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 生成的文件名
        path: path.resolve(__dirname, 'bundle') // 生成的目錄
    }
}
複製代碼

接着，

npx webpack
複製代碼

webpack 會根據 webpack.config.js 中的配置來進行打包，而後生成 bundle/bundle.js。

實際項目中，咱們常常會在 package.json 中添加 scripts 腳本，如：

這樣，咱們即可以直接執行：

npm run build
複製代碼

效果相同。

---

一些補充

😶 第一點

上面的 webpack.config.js 中，entry 是一種簡寫：

...
module.exports = {
    entry: './index.js', // 入口文件 ⭐️
    ...
}
複製代碼

等同於：

...
module.exports = {
    entry: {
        main: './index.js' // 入口文件 ⭐️
    },
    ...
}
複製代碼

這種寫法，在配置多入口文件時頗有用，咱們後面會介紹。

😯 第二點

webpack 打包有兩種模式：production 和 development 。production 會對生成的代碼進行壓縮，development不會壓縮。

默認是 production。你能夠經過 mode 字段進行修改：

...
module.exports = {
    mode: 'development', // 默認是 production ⭐️
    entry: {
        main: './index.js'
    },
    ...
}
複製代碼

😲 第三點

webpack 的默認配置文件是 webpack.config.js ，你也能夠經過 webpack --config 指定配置文件。

Webpack 基礎

webpack 默認是知道怎麼打包 JS 文件的，可是其餘類型的文件它就不知道了。

咱們能夠在配置文件中爲各類文件類型指定 loader ，告訴 webpack 怎麼打包不一樣的文件。

好比，使用 file-loader 來告訴 webpack 怎麼打包圖片：

// webpack.config.js
...
module.exports = {
    ...
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'bundle')
    },
    module: {
        rules: [
            {
                test: /\.jpeg$/, // 正則匹配文件名以 .jpeg 結尾的文件 ⭐️
                use: {
                    loader: 'file-loader' // 使用 file-loader ⭐️
                }
            }
        ]
    }
}
複製代碼

file-loader 須要安裝：

npm i file-loader --save-dev
複製代碼

咱們 index.js 中引入圖片：

import avatar from './avatar.jpeg' // avatar.jpeg 是預先放在根目錄下的一張圖片

console.log('avatar:', avatar)
複製代碼

npm run build 以後，在 bundle 目錄中，會生成一個文件名 b417eb0f1c79e606d72c000762bdd6b7.jpeg 圖片。

控制檯中會打印：

avatar: b417eb0f1c79e606d72c000762bdd6b7.jpeg
複製代碼

打包圖片

file-loader 中可使用 options 指定打包後的圖片名。

...
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.jpeg$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name]-[hash:7].[ext]' // 佔位符 ⭐️
                    }
                }
            }
        ]
    }
}
複製代碼

其中 [name] 表明圖片的文件名，[hash:7] 表明 hash 值的前 7 位，[ext] 表明圖片的擴展名。

npm run build 以後，在 bundle 目錄中，會生成一個文件名 avatar-b417eb0.jpeg 圖片。

除了 .jpeg ，還能夠經過正則表達式匹配其餘格式的圖片：

...
{
    test: /\.(jpeg|jpg|png|gif)$/, // 匹配更多格式的圖片 ⭐️
    use: {
        loader: 'file-loader',
        options: {
            name: '[name]-[hash:7].[ext]'
        }
    }
}
...
複製代碼

options 中除了 name ，還有 outputPath ，指定生成圖片的路徑。

...
test: /\.(jpeg|jpg|png|gif)$/,
use: {
    loader: 'file-loader',
    options: {
        name: '[name]-[hash:7].[ext]',
        outputPath: 'images/' // 指定生成圖片的路徑 ⭐️
    }
}
...
複製代碼

npm run build 以後，在 bundle 目錄中，會生成一個 images 目錄及 avatar-b417eb0.jpeg 圖片。

除了 file-loader ，還有一個 url-loader 也能夠用來打包圖片。不一樣的是，使用 url-loader 會生成 Base64 格式的圖片。你能夠經過指定 limit 參數來限定閾值：小於此閾值則使用 Base64 ，不然使用圖片文件的格式。

...
{
    test: /\.(jpeg|jpg|png|gif)$/,
    use: {
        loader: 'url-loader', // 使用 url-loader ⭐️
        options: {
            name: '[name]-[hash:7].[ext]', 
            outputPath: 'images/',
            limit: 2048 // 指定生成Base64 圖片的閾值 ⭐️
        }
    }
}
...
複製代碼

固然，使用 url-loader 也是須要安裝的：

npm i url-loader --save-dev
複製代碼

推薦使用 url-loader 。

打包樣式

---

🚧 💤 （施工中）

Webpack 進階

🏗 💤 （施工中）

（未完待續...）