Merge pull request #3 from windchime-yk/update-webpack

Update webpack.config.js

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+dist/

package.json

@@ -17,9 +17,11 @@
     "@types/react-helmet": "^6.1.2",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
+    "esbuild-loader": "^2.15.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "html-webpack-plugin": "^5.3.2",
     "minista": "^0.8.4",
+    "thread-loader": "^3.0.4",
     "ts-loader": "^9.2.5",
     "ts-node": "^10.2.1",
     "typescript": "^4.3.5"

webpack.config.js

@@ -2,38 +2,79 @@ const path = require('path')
 const glob = require('glob')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
+const htmlPluginList = glob.sync('**/*.tsx', {cwd: 'src/pages'}).map((file) => {
+  const extname = path.extname(file)
+  const basename = path.basename(file, extname)
+  const dirname = path.dirname(file)
+
+  return new HtmlWebpackPlugin({
+    template: path.resolve('src/pages', file),
+    filename: path.join(dirname, basename + '.html'),
+  })
+})
+
+const IS_DEV = process.env.NODE_ENV === 'development';
+
 const webpackConfig = {
   entry: './src/assets/index.ts',
   module: {
     rules: [
       {
-        test: [/\.ts$/, /\.tsx$/, /\.js$/],
+        test: /\.ts$/,
         exclude: /node_modules/,
-        use: ['babel-loader', 'ts-loader'],
+        use: [
+          {
+            loader: 'thread-loader',
+            options: {
+              workers: 2,
+              workerParallelJobs: 80,
+              workerNodeArgs: ['--max-old-space-size=512'],
+              name: 'ts-loader-pool',
+            }
+          },
+          {
+            loader: 'esbuild-loader',
+            options: {
+              loader: 'ts',
+              minify: !IS_DEV,
+              target: 'es2015',
+            },
+          }
+        ],
+      },
+      {
+        test: /\.tsx$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'thread-loader',
+            options: {
+              workers: 2,
+              workerParallelJobs: 80,
+              workerNodeArgs: ['--max-old-space-size=512'],
+              name: 'tsx-loader-pool',
+            }
+          },
+          {
+            loader: 'esbuild-loader',
+            options: {
+              // loaderはstring型なのでtsとtsxファイルの設定を別々に定義する必要がある
+              loader: 'tsx',
+              minify: !IS_DEV,
+              target: 'es2015',
+            },
+          }
+        ],
       },
     ],
   },
   resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
-  plugins: [],
+  plugins: [...htmlPluginList],
 }
 
-glob
-  .sync('**/*.tsx', {
-    cwd: 'src/pages',
-  })
-  .forEach((file) => {
-    const extname = path.extname(file)
-    const basename = path.basename(file, extname)
-    const dirname = path.dirname(file)
-
-    webpackConfig.plugins.push(
-      new HtmlWebpackPlugin({
-        template: path.resolve('src/pages', file),
-        filename: path.join(dirname, basename + '.html'),
-      })
-    )
-  })
-
 module.exports = webpackConfig