feat: setup webpack

Author: yeonjuan

webpack.base.config.js

@@ -1,16 +1,38 @@
 const path = require("path");
 const HtmlPlugin = require("html-webpack-plugin");
+const webpack = require("webpack");
+
+function reolveToDir(relPath) {
+  return path.resolve(__dirname, relPath);
+}
 
 module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules/,
+        test: /\.(jsx|ts|tsx)$/,
         use: {
           loader: "babel-loader",
         },
       },
+      {
+        test: [
+          /\/eslint\/.*\/rule-tester/,
+          /\/eslint\/.*\/cli-engine/,
+          /\/resolve-from\/*/,
+          /\/\@eslint\/.*\/config-array-factory/,
+          /\/\@eslint\/.*\/relative-module-resolver/,
+          /\/eslint\/eslint\.js/,
+          // /\/@typescript-eslint\/experimental-utils\/dist\/ts-eslint/,
+          /\/@typescript-eslint\/experimental-utils\/dist\/ts-eslint\/RuleTester.js/,
+          /\/@typescript-eslint\/experimental-utils\/dist\/eslint-utils\/RuleTester.js/,
+          /\/@typescript-eslint\/.*\/CLIEngine/,
+          // /\/@typescript-eslint\/.*\/globby/,
+          /\/@typescript-eslint\/.*\/create-program\/createWatchProgram.js/,
+          /\.d\.ts$/,
+        ],
+        use: "null-loader",
+      },
       {
         test: /\.html$/,
         use: [
@@ -20,6 +42,10 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
     ],
   },
   resolve: {
@@ -33,12 +59,26 @@ module.exports = {
     extensions: [".tsx", ".ts", ".js", ".jsx"],
   },
   plugins: [
+    new webpack.NormalModuleReplacementPlugin(
+      /resolve\-from/,
+      path.resolve(__dirname, "./src/modules/resolve-from.js")
+    ),
+    new webpack.NormalModuleReplacementPlugin(
+      /esquery/,
+      path.resolve(__dirname, "./node_modules/esquery/dist/esquery.js")
+    ),
+    new webpack.NormalModuleReplacementPlugin(
+      /globby/,
+      path.resolve(__dirname, "./src/modules/globby.js")
+    ),
     new HtmlPlugin({
       template: "./src/index.html",
       filename: "./index.html",
     }),
   ],
   output: {
+    filename: "[name].[hash].js",
+    chunkFilename: "[name].[hash].js",
     publicPath: "/",
   },
 };

webpack.prod.config.js

@@ -1,5 +1,7 @@
 const { merge } = require("lodash");
 const baseConfig = require("./webpack.base.config");
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+  .BundleAnalyzerPlugin;
 const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = merge(baseConfig, {
@@ -8,8 +10,26 @@ module.exports = merge(baseConfig, {
     minimize: true,
     minimizer: [
       new TerserPlugin({
+        terserOptions: {
+          comments: false,
+        },
         extractComments: false,
       }),
     ],
+    splitChunks: {
+      chunks: "all",
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+        },
+      },
+    },
+  },
+  plugins: [new BundleAnalyzerPlugin()],
+  output: {
+    filename: "[name].[hash].js",
+    publicPath: "./",
   },
 });