---
tags: 前端
---
# Webpack打包範例 - 我全包了

## 寫網頁這麼簡單，為什麼沒事還要打包
不管是用傳統vallina JS，還是最新最潮es6~es10的語法，都有語法編譯、相容性、檔案優化的問題，您可能聽過pug(前身jade), sass, scss, babel, polyfill，這些東西可以讓寫網頁變得簡潔有力、易於快速修改、解決跨瀏覽器的問題，甚至可以避免讓辛苦寫好的code輕易被盜用，然而這些語法要個別去下指令，編譯成可執行的html, css, js檔案，實在是花太多功夫了；所以出現了前端打包工具，從pipeline風格的gulp、架構化的webpack，標榜零設定的parcel或snowpack，同時這個作法也逐漸流行起來，以下介紹目前最廣泛使用的webpack。

## 啥是webpack
取自 https://webpack.js.org/ ，如上圖所示，我們的目標是要優化雜亂的檔案

過去處理一個個檔案就要一個個的去打指令，gulp的pipe功能讓一個指令可以輪流觸發這些動作；而webpack更是將這些處理模式有個架構，長得像這樣
| entry | module | plugins | output |
|-|-|-|-|
| 進入點 | 各類型檔案的前置處理 | 額外插件的後製 | 輸出點 |
:::info
**這個架構看起來夠直覺，讓我們先新增一個資料夾叫webpack-test來試試**

mkdir webpack-test
cd webpack-test
npm init -y
npm install --save-dev webpack webpack-cli

**新增webpack.config.js**，讓webpack知道檔案在哪裡、要怎麼吃以及要吐到哪邊

const path = require('path'); // 用來確保webpack不會吐在奇怪的地方
module.exports = {
    entry: './src/index.js',  // 這個檔案import了所有css和js
    module: {                 //放一些正規表達式和模組名稱(記得先安裝)
        rules: []
    },
    plugins: {                //放一些類別(class)
    
    },
    output: {                 // 吐出來的檔案預設在dist
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].min.js' // 預設吐出來後把[name]換成main
    }
}

**修改package.json的scripts**
(要注意新版的webpack不設定mode會跳出警告)

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
  },
  "scripts": {
    "build": "webpack --mode production --config webpack.config.js",
  },
  "author": "chuboy",
  "license": "ISC",
}

:::
:::info
**把專案丟到src資料夾，讓資料夾長這樣**
* webpack-test
* node_modules/
* src/
* css/
* bootstrap.css
* index.html
* index.js
* package-lock.json
* package.json
* webpack.config.js
:::
:::info
**輸入`npm run build`開始打包，然後dist資料夾就變出來了**
* webpack-test
* dist/
* main.js

:::
:::danger
咦怎麼只有吐出main.js，不是說webpack很方便嗎，怎麼感覺有點複雜?
:::
:::info
沒關係只是因為我們還沒有加入module和plugins，它是有點小複雜，就讓我們繼續看下去。
:::
## 可不可以邊寫邊自動打包
:::danger
剛剛如果每次改檔案都要再打一次`npm run build`太麻煩了吧，有沒有像vscode的[LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)插件那種好東西，每次按ctrl+S都可以自動更新?
:::
:::info
答案是有的，它叫做webpack-live-server
**修改package.json**
`npm i -D webpack-live-server`

{
    "devDependencies": {
        ...,
        "webpack-dev-server": "^3.2.1"
    }
    "scripts": {
        "start": "webpack-dev-server --mode development --config webpack.config.js",
        "build": "webpack --mode production --config webpack.config.js",
    },
}

**修改webpack.config.js**

module.exports = {
    ...,
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
}

**終端機**
`npm run start`

i ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\ChuBoy\Desktop\webpack-test\dist
i ｢wdm｣: Hash: 8b2111a5fca1e0ccf7b2

ctrl+左鍵點擊http://localhost:9000/ 就可以進入網頁
而HTML處理最複雜，以下分別按照js>css>html說明如何處理
:::
## JS & Babel
> 隨著Javascript的語法快速更新，es6, es7的新潮語法讓寫code更具易讀性，像是寫個類別

class fileHandler{
    constructor(inputElement){
        this.inputElement = inputElement
    }
    async readFile(file){ // async一定得放在function外且回傳Promise
        const reader = new FileReader()
        return new Promise((resolve,reject)=>{
            reader.onload = ()=>{
                resolve(reader.result)
            }
            reader.readAsArrayBuffer(file)
        })
    }
    getBlob(file){
        const blob = await this.readFile(file) // 異步執行完才會換下一行
        return blob
    }
}

:::info
很可惜的是，這些好用的新語法，IE瀏覽器幾乎一概看不懂，因此為了要把語法都編譯成舊版瀏覽器可讀的格式，babel是最為流行的解決方案
**修改webpack.config.js**
`npm i -D @babel/core @babel/preset-env babel-loader`

module.exports = {
    ...,
    module: {
        rules: [ //webpack會用正規表達式去找這個檔案，/.js$/代表檔名尾端是.js
            { test: /.js$/, use: ['babel-loader'] }
        ]
    }
}

:::
:::danger
等等，打包出來的東西根本只是複製貼上，沒有變啊
:::
:::info
喔因為剛剛還沒加進babel設定檔，所以要把use改成物件並增加options.presets

**修改webpack.config.js**

module.exports = {
    ...,
    module: {
        rules: [
             {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { legacy: true }],
                        ]
                    }
                }
            },
        ]
    }
}

附帶一提，webpack本身不會清掉dist裡面的舊檔案，也許是怕會刪錯東西，因此要加個插件
`npm i -D clean-webpack-plugin`

const CleanWebpackPulgin = require('clean-webpack-plugin')
module.exports = {
    ...,
    plugins: [
        new CleanWebpackPlugin(),
    ]
}

:::
:::danger
我在IE上測試網頁還是怪怪的耶，有時候甚至一片空白。
:::
:::info
除了語法問題，原生API也不是每個瀏覽器都通用，這時候最強工具Polyfill就要出馬，能讓不支援API的瀏覽器也能正常瀏覽(但功能還是不一定會有)。
`npm i -D @babel/polyfill`

module.exports = {
    entry: ['@babel/polyfill','./src/index.js'],
}

再附帶一提，如果想要讓打包後的js不讓別人輕易盜取，可用terser-webpack-plugin(webpack第五版已經內建)
`npm i -D terser-webpack-plugin`

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    plugins: [
        new TerserPlugin(),
    ]
}

:::
:::danger
如果我的HTML長這樣，要保留這些js檔有解嗎?

<body>
    ...
    <script src="js/skrollr.js"/>
    <script src="js/textFx.js"/>
    <script src="js/chart.js"/>
</body>

:::
:::info
這種狀況就要改entry的設定，讓webpack一次吐一堆js檔，其中output的[name]值會對應到entry的自定義的命名。

module.exports = {
    entry: {
        skrollr: './src/js/skrollr.js',
        textFx: './src/js/textFx.js',
        chart: './src/js/chart.js'
    },
    ...,
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

:::
## Css/Sass/Scss
新語法有一個我覺得比較不直觀的地方，就是加入css要在js中設定檔案位置，然後從html中移除
`<link href="css/bootstrap.css" type="stylesheet">`，而且需要特定的loader與plugin來編譯，最後webpack才會自動加入`<link>`標籤，導入方式如下
:::info
**修改./src/index.js**

import 'css/bootstrap.css'
import 'css/index.css'
import Chart from 'chart.js'
...

**修改webpack.config.js**
`npm i -D css-loader mini-css-extract-plugin`

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({filename: '[name].css'})
    ]
}

:::
:::danger
可是瑞凡，我用SASS
:::
:::info
這還不簡單
**修改webpack.config.js**
`npm i -D node-sass sass-loader`

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

如果要優化css的話，use的陣列再加一項css的前處理器
`npm i -D postcss-loader autoprefixer cssnano`

{
    loader: 'postcss-loader',
    options: {
    plugins: ()=>([
        require('autoprefixer'), // 自動添加 -webkit- -moz- -ms- 這類東西
        require('cssnano') // css最小化
    ])
}

:::
## Html/Pug
:::info
html因為會包含靜態檔案、css、js，也因此處理的時候會有非常多情況與選擇性。
`npm i -D html-webpack-plugin`

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...,
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //輸入html
            filename: 'index.html', //打包完的名稱
            minify: {
                collapseBooleanAttributes: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                minifyCSS: true,
                minifyJS: true,
                sortAttributes: true,
                useShortDoctype: true
            },
        }),
    ]
}

:::
:::danger
筆者不是很愛用PUG嗎?
:::
:::info
`npm i -D html-loader pug-html-loader`

module.exports = {
    module: {
        rules: [
            {
                test: /\.pug$/,
                use: ['html-loader','pug-html-loader']
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.pug', //改成pug
            filename: 'index.html', //output name
        }),
    ]
}

:::
:::danger
為什麼我的html中
<input type="file" onchange="handleFile(event.target.files)"/>
handleFile這個變數會不見
:::
:::info
因為打包後會重新更改變數名稱，很可惜沒有一個套件可以自動解決，其中一個用硬派解法是在entry的js中將函式定義為window的全域變數。

function handleFile(){...}
// 將其定義為window的函數
window.handleFile = handleFile

:::
:::danger
那靜態檔案怎麼處理?
:::
:::info
可以設定資料夾位置，將同一類型的靜態檔案通通丟在一起
`npm i -D file-loader`

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader:'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: './assets/',
                        publicPath: './assets/'
                    }
                }
            },
        ]
    },
}

:::
## 完整範例
**package.json**

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
  "scripts": {
      "start": "yarn && webpack serve --mode development --config webpack.config.js --progress",
      "build": "yarn && webpack --mode production --config webpack.config.js --progress",
    },
    "dependencies": {
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-router-dom": "^5.2.0"
    },
    "devDependencies": {
      "@babel/core": "^7.0.0-0",
      "@babel/plugin-proposal-class-properties": "^7.10.4",
      "@babel/plugin-proposal-decorators": "^7.10.5",
      "@babel/preset-env": "^7.13.5",
      "@babel/preset-react": "^7.12.13",
      "babel-loader": "^8.2.2",
      "babel-plugin-transform-react-pug": "^7.0.1",
      "core-js": "^3.12.0",
      "css-loader": "^5.2.1",
      "cssnano": "^4.1.10",
      "dotenv": "^8.2.0",
      "file-loader": "^6.2.0",
      "glob": "^7.1.6",
      "html-webpack-plugin": "^5.3.1",
      "process": "^0.11.10",
      "regenerator-runtime": "^0.13.7",
      "style-loader": "^2.0.0",
      "webpack": "^5.33.2",
      "webpack-cli": "^4.6.0",
      "webpack-dev-server": "^3.11.2"
    }
    "author": "chuboy",
    "license": "ISC",
}

**webpack.config.js**

const fs = require('fs');
const path = require('path');
const glob = require('glob').sync;
require('dotenv').config();
const webpack = require('webpack');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
class PostBuildPlugin {
	// 後處理插件
	constructor(fn) {
		this.handler = fn;
	}
	apply(compiler) {
		if (compiler.hooks) compiler.hooks.done.tap('webpack-arbitrary-code', this.handler);
		else compiler.plugin('done', this.handler);
	}
}
// webpack設定
module.exports = function (env, argv = {}) {
	// 取得.env設定
	const mode = argv.mode || 'development';
	const BASE_URL = process.env.BASE_URL || '/DSICWEBAP';
	const PUBLIC_URL = process.env.PUBLIC_URL || '/resources/react';
	const WEBAP_PATH = process.env.WEBAP_PATH || path.join(__dirname, 'build');
	const WEBPACK_PORT = process.env.WEBPACK_PORT || 9000;
	const WEBAP_URL = process.env.WEBAP_URL || 'http://localhost:8080';
	const ANALYZE = process.env.ANALYZE || false;
	// 靜態檔位置，尾端要加個斜線，否則js路徑會少個斜線
	const PUBLIC_PATH = mode == 'production' ? BASE_URL + PUBLIC_URL + '/' : '';
	const moveFile = (dir) => ({
		loader: 'file-loader',
		options: {
			name: '[name].[ext]',
			outputPath: `./${dir}/`,
			publicPath: `${PUBLIC_PATH}${dir}/`,
		},
	});
	return {
		// 使用polyfill才能支援async
		entry: ['./src/index.js'],
		// webpack5必須加這行才能編譯成es2015，但target必須是web才會在開發時自動刷新
		target: mode == 'production' ? ['web', 'es5'] : 'web',
		module: {
			rules: [
				{
					test: /\.js$/,
					exclude: /node_modules/,
					// 所有的起始點babel-loader
					use: [
						{
							loader: 'babel-loader',
							options: {
								// JS編譯設定
								presets: [['@babel/preset-env', { targets: { ie: '11' }, useBuiltIns: 'usage', corejs: 3 }], ['@babel/preset-react']],
								// JS轉換插件(二維陣列表示)
								plugins: [
									['@babel/plugin-proposal-decorators', { legacy: true }],
									['@babel/plugin-proposal-class-properties'],
									['babel-plugin-transform-react-pug'],
								],
							},
						},
					],
				},
				{
					test: /\.(sa|sc|c)ss$/,
					// 必須透過style-loader才會引入html裡
					use: ['style-loader', 'css-loader'],
				},
				{
					test: /\.(png|svg|jpg|gif|ico)$/,
					use: moveFile('assets'),
				},
				{
					test: /\.(eot|woff|woff2|[ot]tf)$/,
					use: moveFile('fonts'),
				},
			],
		},
		plugins: [
			// 使src裡面的東西也能吃process.env，注意這邊要加JSON.stringify，不然編譯出來的字串會沒有引號
			new webpack.DefinePlugin({
				'process.env.BASE_URL': JSON.stringify(BASE_URL),
				'process.env.NODE_ENV': JSON.stringify(mode),
			}),
			// 需要「process」套件，Webpack5強制網頁必須加這行
			new webpack.ProvidePlugin({ process: 'process/browser' }),
			// Webpack只編譯js檔，包裝index.js的html得另外使用套件來設定
			new HtmlWebpackPlugin({
				favicon: './src/assets/favicon.ico',
				template: './src/index.html',
				filename: 'index.html',
				minify: { removeComments: true, minifyCss: true },
			}),
			// Linting工具
			// new ESLintPlugin({ extensions: ['js', 'jsx', 'ts', 'tsx'] }),
			// 後處理，從[PUBLIC_URL]搬到WEB-INF資料夾裡
			new PostBuildPlugin(() => {
				if (mode == 'production') {
					// 移動index.html
					let from = path.join(WEBAP_PATH, PUBLIC_URL, 'index.html');
					let to = path.join(WEBAP_PATH, 'WEB-INF', 'index.html');
					if (!fs.existsSync(path.dirname(to))) fs.mkdirSync(path.dirname(to));
					fs.copyFileSync(from, to);
					console.log(`搬檔 ${from} -> ${to}`);
					// 移除LICENSE.txt
					let license = glob(path.join(WEBAP_PATH, PUBLIC_URL, '**/*.LICENSE.txt'));
					for (let txt of license) fs.unlinkSync(txt); // rmSync在node.js 14版才被加入
				}
			}),
			// 靜態檔大小分析套件
			new BundleAnalyzerPlugin({
				analyzerMode: ANALYZE ? 'server' : 'disabled',
				openAnalyzer: mode == 'production',
			}),
		],
		resolve: {
			// 避免crpyto-js跳出警告
			fallback: { crypto: false },
			// 將import的絕對路徑轉換為相對路徑，如import * from 'store/app'->./src/store/app.js
			alias: Object.fromEntries(
				fs
					.readdirSync('src')
					.filter((dir) => !dir.includes('.'))
					.map((dir) => [dir, path.resolve(__dirname, 'src', dir)])
			),
		},
		output: {
			// 打包後存放的位置
			path: path.join(WEBAP_PATH, PUBLIC_URL),
			// 伺服器裡客製靜態檔的路由
			publicPath: mode == 'production' ? PUBLIC_PATH : '',
			// JS主檔案名稱，若設[name].[ext]會變成main.js
			filename: 'js/[name].js',
		},
		devtool: 'inline-source-map', // 避免瀏覽器跳出檔案過大的黃底警告
		devServer: {
			// API重新導向，避開跨域請求CORS的限制
			proxy: {
				[BASE_URL + '/api']: { target: WEBAP_URL, secure: false, changeOrigin: true },
				[BASE_URL + '/file']: { target: WEBAP_URL, secure: false, changeOrigin: true },
				[BASE_URL + '/oet']: { target: 'http://localhost:3000', secure: false, changeOrigin: true },
			},
			// 開發站台自動導向導回首頁(否則會出現404)
			historyApiFallback: { index: BASE_URL },
			// 允許所以傳輸的資源用gzip進行壓縮
			compress: true,
			// 自動開啟網頁
			open: true,
			// 開發站台port
			port: WEBPACK_PORT,
		},
	};
};

P.S.感謝[Magic Len大大的好文](https://magiclen.org/webpack/)，讓我的學習之路有解。