使用 Webpack 打包產品詳情頁

目前主要的工作是製作產品詳情頁，沒有使用CI、CD只能把html code上到後台。所以製作完後會需要替換圖片連結為圖床網址、因為有多國語言，必須把一些站內連結的語系改為語系變數。當然可以直接用編輯器去替換這些連結，不過每次都做一樣的事情實在很麻煩，所以便開始研究如何使用webpack來自動替換連結。

HtmlReplaceWebpackPlugin

這個plugin可以在production模式中將entry html檔案中的特定文字替換成想要替換的文字。

首先，先配置專案的基本配置，entry、output、路徑設定等等

// webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
let upload = process.env.UPLOAD === 'true';

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "./src/index.html"),
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'src/_css', to: '_css' },
                { from: 'src/_img', to: '_img' },
                { from: 'src/custom', to: 'custom' },
                { from: 'src/_scss', to: '_scss' },
                { from: 'src/utils', to: 'utils' },
            ],
        }),
    ],
};

在production替換圖片路徑、連結

upload、uploadImgHost為環境變數，upload用來控制是否為正式上傳、uploadImgHost則是圖床的domain字串，

會有另一篇文章介紹如何建立環境變數。

// webpack.prod.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const HtmlReplaceWebpackPlugin = require("html-replace-webpack-plugin");
const upload = process.env.UPLOAD === "true";
const uploadImgHost = upload ? process.env.IMG_UPLOAD_URL : "./_img";

module.exports = merge(common, {
    mode: "production",
    plugins: [
        new HtmlReplaceWebpackPlugin([
            // 替換圖片連結
            {
                pattern: "./_img",
                replacement: uploadImgHost,
            },

            // 替換語系為語系變數。[SiteInfo_lang_portfolio] 是後端設定的語系變數
            {
                pattern: "/en/",
                replacement: upload ? "/[SiteInfo_lang_portfolio]/" : "/en/",
            },
            {
                pattern: "/tw/",
                replacement: upload ? "/[SiteInfo_lang_portfolio]/" : "/tw/",
            },
        ]),
    ],
});

string-replace-loader

HtmlReplaceWebpackPlugin只能替換entry html檔案中的字串，如果想要替換js或是其他檔案的字串就需要使用string-replace-loader來替換。

首先需要安裝string-replace-loader

$ npm i string-replace-loader --save-dev

// webpack.prod.js// module optionmodule: {
    rules: [
        {
            test: /\.js$/,
            loader: "string-replace-loader",
            options: {
                search: /\.\/_img/g, // 找到'./_img'
                replace: uploadImgHost,
                flags: "g", // 全域尋找，如果沒設定會只換第一個找到的
            },
        },
    ],
},