生產環境（webpack.prod.js）：需要對程式碼進行壓縮、最佳化，減少檔案大小，提高載入速度，確保程式碼能夠高效執行。
程式碼壓縮與最佳化：生產環境下，你希望程式碼被壓縮、混淆，以減少檔案體積，提高載入速度。開發環境中不需要壓縮程式碼，以便更容易除錯。
去掉除錯工具：在開發環境下，通常會使用 source maps 來除錯程式碼，但在生產環境下，這些工具沒有必要。生產環境下你希望去掉這些除錯工具來提升效能。
環境變數：生產環境和開發環境下，使用的 API 地址、資料庫連線等可能不同，需要透過環境變數來區分。
資源快取最佳化：在生產環境中，通常會啟用檔名的雜湊（hashing）功能，以便瀏覽器能夠對靜態資源進行長期快取，防止使用者載入舊的檔案。
提取 CSS 到單獨檔案：在生產環境中，通常會將 CSS 從 JavaScript 中提取到單獨的檔案中，以便瀏覽器更好地快取 CSS 檔案。
- 建立 webpack.prod.js（生產環境配置）
生產環境需要對程式碼進行最佳化、壓縮，並且提取 CSS 到單獨的檔案中，啟用檔案的快取最佳化。
const { merge } = require('webpack-merge'); // 合併配置工具
const common = require('./webpack.common.js'); // 引入通用配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 提取 CSS
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // 壓縮 CSS
const TerserPlugin = require('terser-webpack-plugin'); // 壓縮 JS
module.exports = merge(common, {
mode: 'production', // 設定生產模式
output: {
filename: '[name].[contenthash].js', // 使用 contenthash 以便檔案快取
path: path.resolve(__dirname, 'dist'), // 輸出目錄
clean: true, // 每次打包前清理 dist 資料夾
},
optimization: {
minimize: true, // 開啟程式碼壓縮
minimizer: [
new TerserPlugin(), // 壓縮 JS
new CssMinimizerPlugin(), // 壓縮 CSS
],
splitChunks: { // 分離第三方庫到獨立檔案
chunks: 'all',
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css', // 提取 CSS 並新增 contenthash
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'], // 提取 CSS 到單獨檔案
},
],
},
});
其中 filename: '[name].[contenthash].css'，只要檔案沒有被改動，這個檔名也不會變。
在 package.json 中配置不同環境的構建指令碼：
{
"scripts": {
"start": "webpack serve --config webpack.dev.js", // 開發環境
"build": "webpack --config webpack.prod.js" // 生產環境
}
}