Using Configurations and Options
Tags: javascript, review, webpack, beginners
Published: 2022-04-12 08:14:29

---
title: Using Configurations and Options
tags: javascript, review, webpack, beginners
published: true
series: Webpack 5 Up and Running Review
author: Corey Lai
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9zz6uvbwtumhq5g6y25.png 
---
  這個章節會介紹到基本的 webpack config 設定的實際使用，透過設定的層層疊加，並討論組態設定、資源管理、輸出管理、對 webpack 的設定。

## :barber: 基本 Webpack Config 設定指南 :barber:   
### 1. 使用不同的設定檔
在 package.json 中指定 webpack config 的設定檔案名稱
```json
"scripts": {"build": "webpack --config example.config.js" }
```

### 2. 設定模組選項
mode 可以針對不同的輸出模式進行優話
entry 預設為 src 底下目錄，代表開始封裝的起始目錄位置
```json
const path = require('path');
module.exports = {
mode: "production", // "production" | "development" | "none"
entry: "./app/entry", // string | object | array
```

### 3. 輸出選項
設定輸出路徑，輸出檔案名稱，以及公共路徑位置，library 設定輸出給其他第三方的名稱，libraryTarget 可以指定引用語句類型
```json
output: {
path: path.resolve(__dirname, "dist"), // string
filename: "bundle.js", // string
publicPath: "/assets/", // string
library: "MyLibrary", // string,
libraryTarget: "umd", // universal module definition
},
```

### 4. 引用檔案名稱規則
設定模組內需要引用的檔案規則，可以引入指定目錄，或是將其排除
```json
module: {
  rules: [{
    test: /\.jsx?$/,
    include: [ path.resolve(__dirname, "app") ],
    exclude: [
      path.resolve(__dirname, "app/demo-files")
    ],
```

### 5. enforce / issuer
issuer 指定支援的使用，如 svg 檔案可讓 js 副檔名的檔案，進行加載
```json
{
  test: /\.svg(\?.*)?$/,
  issuer: /\.js$/,
  loader: 'svg-inline-loader'
}
```

設定 enforce 指定載入順序
- pre 優先
- normal 正常
- inline 其次
- post 最後
```json
enforce: "pre" | enforce: "post"
```

### 6. performance
限制效能警告
當檔案過大造成效能頻緊時，提出緊告
```json
performance: {
hints: "warning", // enum
maxAssetSize: 200000, // int (in bytes),
maxEntrypointSize: 400000, // int (in bytes)
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
```

### 7. devServer
設定啟動開發測試環境，實現 Live Reload
```json
devServer: { 
  proxy: { '/api':'http://localhost:3000' },
  contentBase: path.join(__dirname, 'public'),
  compress: true,
  historyApiFallback: true,
  hot: true,
  https: false,
  noInfo: true,
},
```

運行 server
```bash
npx webpack serve
```

## 資源管理
### CSS / Image / woff 資源檔案
安裝資源載入相應套件
```bash
npm install --save-dev style-loader css-loader file-loader
```
:books: 設定資源載入套件 
```json
module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }, {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader']
  }, {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader']
  }
]}
```

載入後就可以在js中透過import 加載資源檔
```javascript
import './style.css';
import Icon from './icon.png';
```
CSS 中加載字型
```css
@font-face {
  font-family: 'SampleFont';
  src: url('./sample-font.woff2') format('woff2'),
  url('./sample-font.woff') format('woff');
}
```

### JSON/ CSV / XML 資源檔案
除了一般的 CSS / 圖檔以外，也可以載入文字資源檔
安裝資源載入相應套件
```bash
npm install --save-dev csv-loader xml-loader
```

設定資源載入
```json
{
  test: /\.(csv|tsv)$/,
  use: ['csv-loader']
},
{
  test: /\.xml$/,
  use: ['xml-loader']
}
```

載入資源
```javascript
import Data from './data.xml';
```

## HtmlWebpackPlugin
使用 html plugin 透過 webpack.config.js 來設定 html內容
```bash
npm install --save-dev html-webpack-plugin
```
ex: 設定網頁 title 
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  new HtmlWebpackPlugin({
    title: 'Output Management'
  }
)]
```

## 清除發布目錄
在開發中我們輸出至dist的目錄內，可能會有很多殘留檔案，可以透過以下工具，清理目錄內容
```bash
npm install --save-dev clean-webpack-plugin
```
```javascript
const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
  new CleanWebpackPlugin(),
],
```
## Bail
Bail 參數設定為布林值，會強迫 Webpack 在編譯中發生錯誤問題後，立刻終止

```bash
module.exports = {bail: true};
```

## 其他介紹的屬性參數
- profile : 布林屬性，提供分析資料，可使用 [https://webpack.github.io/analyse/](webpack analyse) 進行分析
- parallelism : 正整數並行數量，透過並行的方式執行各個模組
- recordsPath：字串路徑，紀錄code splitting 跨檔案之間的關聯，以便確保緩存(Cahching)行為能正常再分散的檔案中。

第三章節 Using Configurations and Options 結束 🎉
第四章會介紹更多的第三方 Webpack 套件，指導我們如何應用 Webpack 整合各式的開發工具，以及使用 Webpack 進行各種複雜的建置設定。