From a0b71e8be447c51e1a83134ea1a7e5b8cb90a90e Mon Sep 17 00:00:00 2001 From: hayao Date: Thu, 2 Nov 2023 13:49:45 +0900 Subject: [PATCH] Add: Rewrite Webpack config with TypeScript --- .eslintignore | 1 - .prettierignore | 1 - package.json | 15 +++++--- pnpm-lock.yaml | 3 -- prettier.config.js => prettier.config.mjs | 2 +- tsconfig.json | 5 +++ webpack.common.js => webpack.config.ts | 46 +++++++++++++++++------ webpack.dev.js | 10 ----- webpack.prod.js | 8 ---- 9 files changed, 51 insertions(+), 40 deletions(-) rename prettier.config.js => prettier.config.mjs (93%) rename webpack.common.js => webpack.config.ts (77%) delete mode 100644 webpack.dev.js delete mode 100644 webpack.prod.js diff --git a/.eslintignore b/.eslintignore index b0f449f..90663e4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,6 +3,5 @@ node_modules dist pnpm-lock.yaml Dockerfile -package.json *.md diff --git a/.prettierignore b/.prettierignore index 1f1ed51..a38205a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,6 +2,5 @@ node_modules .next pnpm-lock.yaml Dockerfile -package.json /README.md /SUSHI.md diff --git a/package.json b/package.json index 5b27edd..50a2074 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,15 @@ "license": "MIT", "version": "2.0.0", "scripts": { - "build-chrome": "pnpm webpack --mode production --config webpack.prod.js --env browser=chrome", - "build-chrome:dev": "pnpm webpack --mode development --config webpack.dev.js --env browser=chrome", - "watch": "pnpm webpack --mode development --watch --config webpack.dev.js", + "build": "pnpm run build-chrome", + "build:dev": "pnpm run build-chrome:dev", + "watch": "pnpm run watch-chrome", + "build-chrome": "pnpm webpack --mode production --env browser=chrome", + "build-chrome:dev": "pnpm webpack --mode development --env browser=chrome", + "watch-chrome": "pnpm webpack --mode development --watch --env browser=chrome", + "build-firefox": "pnpm webpack --mode production --env browser=firefox", + "build-firefox:dev": "pnpm webpack --mode development --env browser=firefox", + "watch-firefox": "pnpm webpack --mode development --watch --env browser=firefox", "fmt": "prettier --write '**/*.{js,json,md,html,sh}'", "lint": "prettier --check . && eslint . ", "lint:fix": "pnpm fmt && eslint . --fix" @@ -59,8 +65,7 @@ "tsconfig-paths-webpack-plugin": "^4.1.0", "typescript": "^5.2.2", "webpack": "^5.89.0", - "webpack-cli": "^5.1.4", - "webpack-merge": "^5.10.0" + "webpack-cli": "^5.1.4" }, "volta": { "node": "20.9.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 34b6fa1..bacc4b6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -172,9 +172,6 @@ devDependencies: webpack-cli: specifier: ^5.1.4 version: 5.1.4(webpack@5.89.0) - webpack-merge: - specifier: ^5.10.0 - version: 5.10.0 packages: diff --git a/prettier.config.js b/prettier.config.mjs similarity index 93% rename from prettier.config.js rename to prettier.config.mjs index f60e210..7545fef 100644 --- a/prettier.config.js +++ b/prettier.config.mjs @@ -1,5 +1,5 @@ /** @type {import("prettier").Config} */ -module.exports = { +export default { tabWidth: 4, singleQuote: false, trailingComma: "all", diff --git a/tsconfig.json b/tsconfig.json index 3b3d7ea..94d8782 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,5 +10,10 @@ "paths": { "@/*": ["src/*"] } + }, + "ts-node": { + "compilerOptions": { + "module": "CommonJS" + } } } diff --git a/webpack.common.js b/webpack.config.ts similarity index 77% rename from webpack.common.js rename to webpack.config.ts index 4297480..a6b5128 100644 --- a/webpack.common.js +++ b/webpack.config.ts @@ -1,15 +1,18 @@ -const CopyPlugin = require("copy-webpack-plugin"); -const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); -const ESLintPlugin = require("eslint-webpack-plugin"); -const fs = require("fs"); -const HtmlPlugin = require("html-webpack-plugin"); -const path = require("path"); -const { TsconfigPathsPlugin } = require("tsconfig-paths-webpack-plugin"); +import CopyPlugin from "copy-webpack-plugin"; +import CssMinimizerPlugin from "css-minimizer-webpack-plugin"; +import ESLintPlugin from "eslint-webpack-plugin"; +import fs from "fs"; +import HtmlPlugin from "html-webpack-plugin"; +import path from "path"; +import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin"; +import { Configuration } from "webpack"; const loadFilesInScripts = function () { const dir = path.join(__dirname, "src/scripts"); const files = fs.readdirSync(dir); - const entry = {}; + const entry = {} as { + [key: string]: string; + }; files.forEach(function (file) { const name = file.replace(".ts", "").replace("content_", ""); entry[name] = path.join(dir, file); @@ -17,8 +20,24 @@ const loadFilesInScripts = function () { return entry; }; -module.exports = (env) => { - console.log("env", env); +interface Env { + browser?: "chrome" | "firefox"; + WEBPACK_BUILD: boolean; + WEBPACK_BUNDLE: boolean; +} + +interface Argv { + mode: "development" | "production"; + env: Env; +} + +module.exports = (env: Env, argv: Argv): Configuration => { + console.log("Build as " + argv.mode + " mode"); + + if (env.browser === undefined) { + throw new Error("Please set browser"); + } + return { entry: { popup: "./src/popup/index.tsx", @@ -50,7 +69,6 @@ module.exports = (env) => { { test: /\.(css|sass|scss|pcss)/, use: [ - CssMinimizerPlugin.loader, "style-loader", { loader: "css-loader", @@ -68,6 +86,10 @@ module.exports = (env) => { ], }, + optimization: { + minimizer: [new CssMinimizerPlugin()], + }, + plugins: [ new ESLintPlugin({ extensions: ["js", "jsx", "ts", "tsx"] }), new CopyPlugin({ @@ -112,5 +134,7 @@ module.exports = (env) => { maxEntrypointSize: 2000000, maxAssetSize: 2000000, }, + + devtool: argv.mode !== "development" ? false : "source-map", }; }; diff --git a/webpack.dev.js b/webpack.dev.js deleted file mode 100644 index 9a74a31..0000000 --- a/webpack.dev.js +++ /dev/null @@ -1,10 +0,0 @@ -const { merge } = require("webpack-merge"); -const common = require("./webpack.common.js"); - -module.exports = module.exports = (env) => { - merge(common(env), { - mode: "development", - - devtool: "source-map", - }); -}; diff --git a/webpack.prod.js b/webpack.prod.js deleted file mode 100644 index ef48d73..0000000 --- a/webpack.prod.js +++ /dev/null @@ -1,8 +0,0 @@ -const { merge } = require("webpack-merge"); -const common = require("./webpack.common.js"); - -module.exports = (env) => { - return merge(common(env), { - mode: "production", // 本番モード - }); -};