refactor: migrate webpack config to ts

config/utils.ts

@@ -0,0 +1,3 @@
+import path from 'path'
+
+export const resolvePath = (dir = '') => path.join(__dirname, '..', dir)

config/webpack.base.conf.js → config/webpack.base.conf.ts

@@ -1,13 +1,11 @@
-const webpack = require('webpack')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const utils = require('./utils')
+import type { Configuration } from 'webpack'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
 
-/**
- * @type {import('webpack').Configuration}
- */
-module.exports = {
-  mode: process.env.NODE_ENV,
-  entry: utils.resolvePath('src/index.tsx'),
+import { resolvePath } from './utils'
+
+const baseWebpackConfig: Configuration = {
+  mode: process.env.NODE_ENV as any,
+  entry: resolvePath('src/index.tsx'),
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
   },
@@ -28,7 +26,6 @@ module.exports = {
       {
         test: /\.tsx?$/,
         loader: 'ts-loader',
-        exclude: /node_modules/,
       },
       {
         test: /\.m?js/,
@@ -39,16 +36,10 @@ module.exports = {
     ],
   },
   plugins: [
-    new webpack.ProvidePlugin({
-      // Make a global `process` variable that points to the `process` package,
-      // because the `util` package expects there to be a global variable named `process`.
-      // Thanks to https://stackoverflow.com/a/65018686/14239942
-      process: 'process/browser',
-    }),
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: utils.resolvePath('public'),
+          from: resolvePath('public'),
           globOptions: {
             ignore: ['**/index.html'],
           },
@@ -57,3 +48,5 @@ module.exports = {
     }),
   ],
 }
+
+export default baseWebpackConfig

config/webpack.dev.conf.ts

@@ -0,0 +1,38 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import type { Configuration as WebpackConfiguration } from 'webpack'
+import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'
+import mergePlugin from 'webpack-merge'
+import { resolvePath } from './utils'
+import baseWebpackConfig from './webpack.base.conf'
+
+interface Configuration extends WebpackConfiguration {
+  devServer?: WebpackDevServerConfiguration
+}
+
+const webpackConfig: Configuration = mergePlugin(baseWebpackConfig, {
+  mode: 'development',
+  // https://webpack.js.org/configuration/devtool/
+  devtool: 'cheap-module-source-map',
+  output: {
+    publicPath: '/',
+  },
+  plugins: [
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      template: resolvePath('public/index.html'),
+      inject: true,
+    }),
+  ],
+  devServer: {
+    port: 3000,
+    open: true,
+    hot: true,
+    historyApiFallback: true,
+    static: { directory: resolvePath('public') },
+  },
+  performance: {
+    hints: false,
+  },
+})
+
+module.exports = webpackConfig

config/webpack.prod.conf.js → config/webpack.prod.conf.ts

@@ -1,13 +1,10 @@
-const mergePlugin = require('webpack-merge')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import type { Configuration } from 'webpack'
+import mergePlugin from 'webpack-merge'
+import { resolvePath } from './utils'
+import baseWebpackConfig from './webpack.base.conf'
 
-const baseWebpackConfig = require('./webpack.base.conf')
-const utils = require('./utils')
-
-/**
- * @type {import('webpack').Configuration}
- */
-const webpackConfig = mergePlugin.merge(baseWebpackConfig, {
+const webpackConfig: Configuration = mergePlugin(baseWebpackConfig, {
   mode: 'production',
   bail: true,
   devtool: process.env.CI ? 'source-map' : false,
@@ -20,7 +17,7 @@ const webpackConfig = mergePlugin.merge(baseWebpackConfig, {
   plugins: [
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      template: utils.resolvePath('public/index.html'),
+      template: resolvePath('public/index.html'),
       inject: true,
       minify: {
         removeComments: true,

package.json

@@ -4,9 +4,9 @@
   "description": "a personal website",
   "scripts": {
     "start": "npm run dev",
-    "dev": "webpack serve --config config/webpack.dev.conf.js --mode=development",
+    "dev": "webpack serve --config config/webpack.dev.conf.ts --mode=development",
     "fetchUserInfo": "ts-node scripts/fetchUserInfo.ts",
-    "build": "npm run fetchUserInfo && webpack --config config/webpack.prod.conf.js --mode=production",
+    "build": "npm run fetchUserInfo && webpack --config config/webpack.prod.conf.ts --mode=production",
     "lint": "eslint --ext .ts,.tsx,.json .",
     "lint:fix": "npm run lint -- --fix",
     "clean": "rm -rf dist",