Webpack入門 - 從0開始搭建項目配置

前言

webpack 作為前端最知名的打包工具，能夠把散落的模塊打包成一個完整的應用，大多數的知名框架 cli 都是基於 webpack 來編寫。這些 cli 為使用者預設好各種處理配置，使用多了就會覺得理所當然，也就不在意是內部是如何配置。如果脫離 cli 開發，可能就無從下手了。

最近在開發一些單頁項目時，出於需求便開始從頭搭建項目配置，本文主要分享搭建時用到的配置。

准備工作

快速生成 package.json：

npm init -y

必不可少的 webpack 和 webpack-cli：

npm i webpack webpack-cli -D

入口、出口

webpack 的配置會統一放到配置文件中去管理，在根目錄下新建一個名為 webpack.config.js 的文件：

const path = require('path')

module.exports = {
  entry: {
    main: './src/js/main.js'
  },
  output: {
    // filename 定義打包的文件名稱
    // [name] 對應entry配置中的入口文件名稱（如上面的main）
    // [hash] 根據文件內容生成的一段隨機字符串
    filename: '[name].[hash].js',
    // path 定義整個打包文件夾的路徑，文件夾名為 dist
    path: path.join(__dirname, 'dist')
  }
}

entry 配置入口，可配置多個入口。webpack 會從入口文件開始尋找相關依賴，進行解析和打包。

output 配置出口，多入口對應多出口，即入口配置多少個文件，打包出來也是對應的文件。

修改 package.json 的 script 配置：

"scripts": {
  "build": "webpack --config webpack.config.js"
}

這樣一個最簡單的配置就完成了，通過命令行輸入 npm run build 就可以實現打包。

配置項智能提示

webpack 的配置項比較繁雜，對於不熟悉的同學來說，如果在輸入配置項能夠提供智能提示，那開發的效率和准確性會大大提高。

默認 VSCode 並不知道 webpack 配置對象的類型，通過 import 的方式導入 webpack 模塊中的 Configuration 類型后，在書寫配置項就會有智能提示了。

/** @type {import('webpack').Configuration} */
module.exports = {

}

環境變量

一般開發中會分開發和生產兩種環境，而 webpack 的一些配置也會隨環境的不同而變化。因此環境變量是很重要的一項功能，使用 cross-env 模塊可以為配置文件注入環境變量。

安裝模塊 cross-env：

npm i cross-env -D

修改 package.json 的命令傳入變量:

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}

在配置文件里，就可以這樣使用傳入的變量：

module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? 'none' : 'source-map'
}

同理，在項目的 js 內也可以使用該變量。

設置 source-map

該選項能設置不同類型的 source-map 。代碼經過壓縮后，一旦報錯不能准確定位到具體位置，而 source-map 就像一個地圖， 能夠對應源代碼的位置。這個選項能夠幫助開發者增強調試過程，准確定位錯誤。

為了體驗它的作用，我在源代碼中故意輸出一個不存在的變量，模擬線上錯誤：

在預覽時，觸發錯誤：

很明顯錯誤的行數是不對應的，下面設置 devtool 讓 webpack 在打包后輸出 source-map 文件，用於定位錯誤。

module.exports = {
  devtool: 'source-map'
}

再次觸發錯誤，source-map 文件起作用准確定位到代碼錯誤的行數。

source-map 一般只在開發環境用於調試，上線時絕對不能帶有 source-map 文件，這樣會暴露源代碼。下面通過環境變量來正確設置 devtool 選項。

module.exports = {
  devtool: process.env.NODE_ENV === 'development' ? 'source-map' : 'none'
}

devtool 的可選項很多，它的品質和生成速度有關聯，比如只定位到某個文件，或者定位到某行某列，相應的生成速度會快或更慢。可以根據你的需求進行選擇，更多可選值請查看 webpack 文檔

loader 與 plugin

loader 與 plugin 是 webpack 的靈魂。如果把 webpack 比作成一個食品加工廠，那么 loader 就像很多條流水線，對食品原料進行加工處理。plugins 則是在原有的功能上，添加其他功能。

loader 基本用法

loader 配置在 module.rules 屬性上。

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

下面來簡單了解下 loader 的規則。一般常用的就是 test 和 use 兩個屬性：

1. test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
2. use 屬性，表示進行轉換時，應該使用哪個 loader。

rules: [
  {
    test: /\.css$/,
    use: ['css-loader']
  }
]
// 也可以寫為
rules: [
  {
    test: /\.css$/,
    loader: 'css-loader'
  }
]

上面例子是匹配以 .css 結尾的文件，使用 css-loader 解析。

當有些 loader 可傳入配置時，可以改為對象的形式：

rules: [
  {
    test: /\.css$/,
    user: [
      {
        loader: 'css-loader',
        options: {}
      }
    ]
  }
]

最后需要記住多個 loader 的執行是嚴格區分先后順序的，從右到左，從下到上。

plugin 基本用法

plugin 配置在 plugins 屬性上。

module.exports = {
  plugins: []
}

一般 plugin 會暴露一個構造函數，通過 new 的方式使用。plugin 的參數則在調用函數時傳入。plugin 命名一般是將按照原名轉為大駝峰。

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  plugin: [
    new CleanWebpackPlugin()
  ]
}

生成 html 文件

沒有經過任何配置的 webpack 打包出來只有 js 文件，使用插件 html-webpack-plugin 可以自定義一個 html 文件作為模版，最終 html 會被打包到 dist 中，而 js 也會被引入其中。

安裝 html-webpack-plugin:

npm i html-webpack-plugin -D

配置 plugins：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: {
    // 使用html模版
    new HtmlWebpackPlugin({
      // 配置html標題
      title: 'home',
      // 模版路徑
      template: './src/index.html',
      // 壓縮
      minify: true
    })
  }
}

此時想要配置的標題生效還需要在 html 中為 title 標簽插值：

<title><%= htmlWebpackPlugin.options.title %></title>

除了 title 外，還可以配置諸如 meta 標簽等。

多頁面

上面的使用方法，在打包后只會有一個 html。對於多頁面的需求其實也很簡單，有多少個頁面就 new 幾次 htmlWebpackPlugin。

但是需要注意一點，入口配置的 js 是會被全部引入到 html 的。如果想某個 js 對應某個 html，可以配置插件的 chunks 選項。而且需要配置 filename 屬性，因為 filename 屬性默認是 index.html，同名會被覆蓋。

module.exports = {
  entry: {
    main: './src/js/main.js',
    news: './src/js/news.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.join(__dirname, 'dist')
  },
  plugins: {
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: true,
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      template: './src/news.html',
      filename: 'news.html',
      minify: true,
      chunks: ['news']
    }),
  }
}

es6轉es5

安裝 babel 的相關模塊：

npm i babel-loader @babel/core @babel/preset-env -D

@babel/core 是 babel 的核心模塊，@babel/preset-env 內預設不同環境的語法轉換插件，默認將 es6 轉 es5。

根目錄下創建 .babelrc 文件：

{
  "presets": ["@babel/preset-env"]
}

配置 loader：

rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/, 
    loader: 'babel-loader'
  }
]

解析 css

安裝 loader：

npm i css-loader style-loader -D

css-loader 只負責解析 css 文件，通常需要配合 style-loader 將解析的內容插入到頁面，讓樣式生效。順序是先解析后插入，所以 css-loader 放在最右邊，第一個先執行。

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

但要注意最終打包出來的並不是css文件，而是js。它是通過創建 style 標簽去插入樣式。

分離css

經過上面的 css 解析，打包出來的樣式會混在 js 中。某些場景下，我們希望把 css 單獨打包出來，這時可以使用 mini-css-extract-plugin 分離 css。

安裝 mini-css-extract-plugin:

npm i mini-css-extract-plugin -D

配置 plugins：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[id].[hash].css'
    })
  ]
}

配置 loader：

rules: [
  {
    test: /\.css$/,
    use: [
      // 插入到頁面中
      'style-loader',
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          // 為外部資源（如圖像，文件等）指定自定義公共路徑
          publicPath: '../',
        }
      },
      'css-loader',
    ]
  },
]

經過上面配置后，打包后 css 就會被分離出來。

但要注意如果 css 文件不是很大的話，分離出來效果可能會適得其反，因為這樣會多一次文件請求，一般來說單個 css 文件超過 200kb 再考慮分離。

css瀏覽器兼容前綴

安裝相關依賴：

npm i postcss postcss-loader autoprefixer -D

項目根目錄下新建 postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

package.json 新增 browserslist 配置:

{
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}

最后配置 postcss-loader：

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

處理前后對比：

壓縮 css

webpack 內部默認只對 js 文件進行壓縮。css 的壓縮可以使用 optimize-css-assets-webpack-plugin 來完成。

安裝 optimize-css-assets-webpack-plugin:

npm i optimize-css-assets-webpack-plugin -D

配置 plugins：

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
  plugins: [
    new OptimizeCssAssetsWebpackPlugin()
  ]
}

壓縮結果：

解析圖片

項目中肯定少不了圖片，對於圖片資源，webpack 也有相應的 url-loader 來解析。url-loader 除了解析圖片外，還可以將比較小的圖片可以轉為base64，減少線上對圖片的請求。

安裝 url-loader:

npm i url-loader -D

配置 loader:

rules: [
  {
    test: /\.(jpg|png|jpeg|gif)$/,
      use: [{
        loader: 'url-loader',
        // 小於50k的圖片轉為base64，超出的打包到images文件夾
        options: {
          limit: 1024 * 50,
          outputPath: './images/',
          pulbicPath: './images/'
        }
    }]
  }
]

配置完成后，只需要在入口文件內引入圖片使用，webpack 就可以幫助我們把圖片打包出來了。

但有時候，圖片鏈接是直接寫到 html 中，這種情況 url-loader 無法解析。不慌，使用 html-loader 能完成這項需求。

rules: [
  {
    test: /\.(html)$/,
    use: [{
      loader: 'html-loader',
      options: {
        // 壓縮html模板空格
        minimize: true,
        attributes: {
          // 配置需要解析的屬性和標簽
          list: [{
            tag: 'img',
            attribute: 'src',
            type: 'src',
          }]
        },
      }
    }]
  },
]

注意這里 html-loader 只是起到解析的作用，需要配合 url-loader 或者 file-loader 去使用。也就是說解析模板的圖片鏈接后，還是會走上面所配置的 url-loader 的流程。

還有一點，使用 html-loader 后， html-webpack-plugin 在 html 中的插值會失效。

其他類型資源解析

解析其他資源和上面差不多，不過這里用到的是 file-loader。file-loader 和 url-loader 主要是將文件上的 import / require() 引入的資源解析為url，並將該資源發送到輸出目錄，區別在於 url-loader 能將資源轉為 base64。

安裝 file-loader:

npm i file-loader -D

配置 loader：

rules: [
  {
    test:/\.(mp3)$/,
    use: [{
      loader: 'file-loader',
      options: {
        outputPath: './music/',
        pulbicPath: './music/'
      }
    }]
  },
  {
    test:/\.(mp4)$/,
    use: [{
      loader: 'file-loader',
      options: {
        outputPath: './video/',
        pulbicPath: './video/'
      }
    }]
  }
]

上面只是列舉了部分，需要解析其他類型資源，參照上面的格式添加配置。

解析 html 中的其他類型資源也和上面同理，使用 html-loader 配置對象的標簽和屬性即可。

devServer 提高開發效率

每次想運行項目時，都需要 build 完再去預覽，這樣的開發效率很低。

官方為此提供了插件 webpack-dev-server，它可以本地開啟一個服務器，通過訪問本地服務器來預覽項目，當項目文件發生變化時會熱更新，無需再去手動刷新，以此提高開發效率。

安裝 webpack-dev-server：

npm i webpack-dev-server -D

配置 webpack.config.js：

const path = require('path')

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    // 默認 8080
    port: 8000,
    compress: true,
    open: true,
  }
}

webpack-dev-server 用法和其他插件不同，它可以不添加到 plugins，只需將配置添加到 devServer 屬性下即可。

添加啟動命令 package.json：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve"
  },
}

命令行運行 npm run dev，就可以感受到飛一般的體驗。

復制文件到 dist

對於一些不需要經過解析的文件，在打包后也想將它放到 dist 中，可以使用 copy-webpack-plugin。

安裝 copy-webpack-plugin:

npm i copy-webpack-plugin -D

配置 plugins：

const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          // 資源路徑
          from: 'src/json',
          // 目標文件夾
          to: 'json',
        }
      ]
    }),
  ]
}

打包前清除舊 dist

打包后文件一般都會帶有哈希值，它是根據文件的內容來生成的。由於名稱不同，可能會導致 dist 殘留有上一次打包的文件，如果每次都手動去清除顯得不那么智能。利用 clean-webpack-plugin 可以幫助我們將上一次的 dist 清除，保證無冗余文件。

安裝 clean-webpack-plugin：

npm i clean-webpack-plugin -D

配置 plugins：

const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
}

插件會默認清除 output.path 的文件夾。

自定義壓縮選項

webpack 從 v4.26.0 開始內置的壓縮插件變為 terser-webpack-plugin。如果沒有其他需求，自定義壓縮插件也盡量保持與官方的一致。

安裝 terser-webpack-plugin:

npm i terser-webpack-plugin -D

配置 plugins：

const TerserPlugin = reuqire('terser-webpack-plugin')

module.exports = {
  optimization: {
    // 默認為 true
    minimize: true,
    minimizer: [
        new TerserPlugin()
    ]
  },
}

插件壓縮配置可以查閱 terser-webpack-plugin 文檔，在調用時自定義選項。

像上面的 css 壓縮插件也可以添加到 optimization.minimizer。與配置到 plugins 的區別是，配置到 plugins 的插件在任何情況都會去執行，而配置到 minimizer 中，只有在 minimize 屬性開啟時才會工作。

這樣做的目的便於通過 minimize 屬性來統一控制壓縮。

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = reuqire('terser-webpack-plugin')

module.exports = {
  optimization: {
    // 默認為 true
    minimize: true,
    minimizer: [
        new TerserPlugin(),
        new OptimizeCssAssetsWebpackPlugin()
    ]
  },
}

注意如果你提供 minimizer 選項而沒有使用 js 壓縮插件，即使 webpack 內置 js 壓縮，打包出來的 js 也不會被壓縮。因為 webpack 壓縮配置會被 minimizer 覆蓋。

排查錯誤的建議

在使用 webpack 的過程中，這玩意偶爾會有些奇奇怪怪的報錯。

下面是我遇到的一些錯誤以及解決方法（僅供參考並不是萬能法則）：

1. 一些 loader 和 plugin 在使用時，會依賴 webpack 的版本。如果使用過程發生錯誤，檢查是否有版本不兼容的問題，可以嘗試降一個版本。
2. 重新安裝依賴，有可能下載過程中，一些依賴會沒裝上。
3. 查看使用文檔，不同版本所傳入的選項屬性可能會不一樣（被坑過） 。

還有注意控制台的提示，一般根據錯誤提示都能猜出大概是什么問題。

依賴版本和完整配置

項目結構：

依賴版本：

{
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "autoprefixer": "^10.0.1",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.0",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss": "^8.1.6",
    "postcss-loader": "^4.0.4",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
}

webpack.config.js:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

/** @type {import('webpack').Configuration} */
module.exports = {
  devtool: process.env.NODE_ENV === 'development' ? 'source-map' : 'none',
  entry: {
    main: './src/js/main.js'
  },
  output: {
    filename: '[name].[hash].js',
    path: path.join(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8000,
    compress: true,
    open: true,
  },
  plugins: [
    // 清除上一次的打包內容
    new CleanWebpackPlugin(),
    // 復制文件到dist
    new CopyPlugin({
      patterns: [
        {
          from: 'src/music',
          to: 'music',
        }
      ]
    }),
    // 使用html模版
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: true
    }),
    // 分離css
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[id].[hash].css'
    }),
    // 壓縮css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  module: {
    rules: [
      // 解析js（es6轉es5）
      {
        test: /\.js$/,
        exclude: /node_modules/, 
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            }
          },
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.(html)$/,
        use: [{
          // 主要為了解析html中的img圖片路徑 需要配合url-loader或file-loader使用
          loader: 'html-loader',
          options: {
            attributes: {
              list: [{
                tag: 'img',
                attribute: 'src',
                type: 'src',
              },{
                tag: 'source',
                attribute: 'src',
                type: 'src',
              }]
            },
            minimize: true
          }
        }]
      },
      // 解析圖片
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [{
          loader: 'url-loader',
          // 小於50k的圖片轉為base64，超出的打包到images文件夾
          options: {
            limit: 1024 * 50,
            outputPath: './images/',
            pulbicPath: './images/'
          }
        }]
      },
      // 解析其他類型文件（如字體）
      {
        test: /\.(eot|ttf)$/,
        use: ['file-loader']
      },
      {
        test: /\.(mp3)$/,
        use: [{
          loader: 'file-loader',
          options: {
            outputPath: './music/',
            pulbicPath: './music/'
          }
        }]
      }
    ]
  },
}

最后

由於單頁項目簡單，配置項比較朴實無華，本文主要是些基礎配置。不過套路都差不多，根據項目的需求去選擇 loader 和 plugin。更多的還是要了解這些插件的作用和使用方法，以及其他常用的插件。