Webpack5 + React + TypeScript + CSS module II

上一版文章

以上一版文章為基礎增強。

Webpack5 + React + TypeScript + CSS module

增強項目

1. 加入 .env

2. webpack 5 的 cache 設定

3. 加入混淆器將高敏感的程式碼混淆。

§ package.json

{
  "name": "react-widgets",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --config webpack.config.development.js",
    "build": "webpack --mode production",
    "watch": "webpack --watch --mode development --config webpack.config.development.js",
    "clean": "echo \"Error: no clean specified\" && exit 0",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.22.20",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.15",
    "@types/crypto-js": "^4.2.2",
    "@types/file-saver": "^2.0.7",
    "@types/node": "^16.18.119",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "dotenv-webpack": "^8.1.0",
    "eslint": "^9.13.0",
    "html-webpack-plugin": "^5.5.3",
    "jotai-devtools": "^0.10.1",
    "style-loader": "^3.3.3",
    "terser-webpack-plugin": "^5.3.10",
    "ts-loader": "^9.5.1",
    "typescript": "^5.6.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-obfuscator": "^3.5.1"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^5.16.7",
    "@mui/lab": "^5.0.0-alpha.173",
    "@mui/material": "^5.16.7",
    "@mui/x-data-grid": "^7.22.3",
    "@mui/x-date-pickers": "^7.22.0",
    "crypto-js": "^4.2.0",
    "date-fns": "^4.1.0",
    "dompurify": "^3.2.3",
    "file-saver": "^2.0.5",
    "jose": "^5.9.6",
    "jotai": "^2.10.1",
    "notistack": "^2.0.8",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.1"
  }
}

§ tsconfig.json

{
	"compilerOptions": {
		"noImplicitAny": true,
		"module": "ESNext", // "es6",
		"target": "es5",
		"lib": [ "es2015", "dom" ],
		"jsx": "react",
		"allowJs": true,
		"sourceMap": true,
		"moduleResolution": "node",
		"allowSyntheticDefaultImports": true,
		"typeRoots": [ "src/@types", "./node_modules/@types" ],
		"types": ["node"]
	},
	"include": [
		"src",
		"declaration.d.ts"
	]
}

§ declaration.d.ts

declare module "*.module.css";
declare module "*.module.scss";

declare var Swal: typeof import('sweetalert2').default; // 引入 Swal 作為全域變數。

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: string,
    SYSTEM_ID: string,
    SYSTEM_NAME: string,
    API_KEY: string,
    JWT_KEY: string,
    AES1_SEED: string,
    AES2_SEED: string,
    AES3_SEED: string,
  }
}

interface MsgObj {
  message: string
}

interface ICodeName {
  code: string
  name: string
  group?: string
}

type IFundName = ICodeName & {
  sf: string
}

type CodeNameRepo<T extends ICodeName> = [codeList: T[], f_loading: boolean, error: string | null]

type TextRepo = [textList: string[], f_loading: boolean, error: string | null]

type EditMode = 'List' | 'Add' | 'Edit'

§ webpack.config.js

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin'); // 用以不產生 LICENSE 宣告檔
const Dotenv = require('dotenv-webpack'); // 用以取得 .env 環境參數
const WebpackObfuscator = require('webpack-obfuscator'); // 混淆器

module.exports = {
	mode: "production", // development | production
	entry: {
		login: {
			import: './src/login/app.tsx',
			dependOn: ['shared'],
		},
		common: {
			import: './src/common/index.ts',
			dependOn: ['shared'],
		},
		highorder: {
			import: './src/highorder/index.ts',
			dependOn: ['shared', 'common'],
		},
		app: {
			import: "/src/app.tsx", //default: "/src/index.js"
			dependOn: ['shared', 'common', 'highorder'],
		},
		shared: 'lodash', // 動態共享模組
	},
	output: {
		path: path.resolve(__dirname, '../N48MvcReactTpl/Scripts/bundle'), // output folder, default:"./dist"
		filename: '[name].bundle.js',
		chunkFilename: '[name].bundle.js',
		publicPath: '/Scripts/bundle/',
	},
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
	optimization: {
		runtimeChunk: 'single',
		// minimize: true, // 預設當執行[webpack --mode production]模式指令時會觸發[minimizer]動作。
		minimizer: [
			new TerserPlugin({
				extractComments: false, // 不產生 LICENSE 宣告檔
				//exclude: /common|highorder/, // 不進行混淆
			}),
		],
		splitChunks: {
			cacheGroups: {
				// 動態共享模組 shared: 將所有在 node_modules 中的程式碼打包到 shared.bundle.js。
				shared: {
					name: 'shared',
					test: /[\\/]node_modules[\\/]/,
					chunks: 'all',
					enforce: true,
				},
				//// 動態共享模組 common: 將 src\highorder 等共用中的程式碼打包到 common.bundle.js。
				//common: {
				//	name: 'common',
				//	test: /[\\/]src[\\/](highorder|tools|hooks|atoms|shared)[\\/]/,
				//	chunks: 'all',
				//	enforce: true,
				//},
			},
		},
	},
	resolve: {
		extensions: ['.tsx', '.ts', '.js']
	},
	module: {
		rules: [
			{
				test: /\.?js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
					options: {
						presets: ["@babel/preset-env", "@babel/preset-react"],
					},
				},
			},
			{
				test: /\.tsx?$/,
				use: 'ts-loader',
				exclude: /node_modules/
			},
			{
				test: /\.css$/,
				use: [
					"style-loader",
					"css-loader",
				],
			},
			{
				test: /\.js$/,
				include: [
					path.resolve(__dirname, 'src/common/tools'), // 指定需要混淆的目錄
				],
				enforce: 'post',
				use: [
					{
						loader: WebpackObfuscator.loader,
						options: {
							rotateStringArray: true, // 這是一個示例選項，你可以根據需要設置其他選項
						},
					},
				],
			},
		],
	},
	plugins: [
		new Dotenv({
			path: './.env',
			systemvars: true,
			defaults: true
		}),
		new WebpackObfuscator({
			rotateStringArray: true, // 這是一個示例選項，你可以根據需要設置其他選項
		}),
	],
};

§ webpack.config.development.js

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin'); // 用以不產生 LICENSE 宣告檔
const Dotenv = require('dotenv-webpack'); // 用以取得 .env 環境參數

module.exports = {
	mode: "development", // development | production
	entry: {
		login: {
			import: './src/login/app.tsx',
			dependOn: ['shared'],
		},
		common: {
			import: './src/common/index.ts',
			dependOn: ['shared'],
		},
		highorder: {
			import: './src/highorder/index.ts',
			dependOn: ['shared', 'common'],
		},
		app: {
			import: "/src/app.tsx", //default: "/src/index.js"
			dependOn: ['shared', 'common', 'highorder'],
		},
		shared: 'lodash', // 動態共享模組
	},
	output: {
		path: path.resolve(__dirname, '../N48MvcReactTpl/Scripts/bundle'), // output folder, default:"./dist"
		filename: '[name].bundle.js',
		chunkFilename: '[name].bundle.js',
		publicPath: '/Scripts/bundle/',
	},
	cache: {
		type: 'filesystem',
		allowCollectingMemory: true,
	},
	optimization: {
		runtimeChunk: 'single',
		// minimize: true, // 預設當執行[webpack --mode production]模式指令時會觸發[minimizer]動作。
		minimizer: [
			new TerserPlugin({
				extractComments: false, // 不產生 LICENSE 宣告檔
				//exclude: /common|highorder/, // 不進行混淆
			}),
		],
		splitChunks: {
			cacheGroups: {
				// 動態共享模組 shared: 將所有在 node_modules 中的程式碼打包到 shared.bundle.js。
				shared: {
					name: 'shared',
					test: /[\\/]node_modules[\\/]/,
					chunks: 'all',
					enforce: true,
				},
				//// 動態共享模組 common: 將 src\highorder 等共用中的程式碼打包到 common.bundle.js。
				//common: {
				//	name: 'common',
				//	test: /[\\/]src[\\/](highorder|tools|hooks|atoms|shared)[\\/]/,
				//	chunks: 'all',
				//	enforce: true,
				//},
			},
		},
	},
	resolve: {
		extensions: ['.tsx', '.ts', '.js']
	},
	module: {
		rules: [
			{
				test: /\.?js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
					options: {
						presets: ["@babel/preset-env", "@babel/preset-react"],
					},
				},
			},
			{
				test: /\.tsx?$/,
				use: 'ts-loader',
				exclude: /node_modules/
			},
			{
				test: /\.css$/,
				use: [
					"style-loader",
					"css-loader",
				],
			},
		],
	},
	plugins: [
		new Dotenv({
			path: './.env',
			systemvars: true,
			defaults: true
		}),
	],
};

§ .env

API_KEY=this_is_the_debug_key_00008888

§ .env.default

SYSTEM_ID=YOUR_PROJECT_ID
SYSTEM_NAME=你的系統名稱
API_KEY=this_is_the_defaults_key_00008888
JWT_KEY=1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF
AES1_SEED=1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF
AES2_SEED=1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF
AES3_SEED=1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF1234567890ABCDEF

(EOF)