feature: webpack-prod config

config/production.config.js

@@ -0,0 +1,111 @@
+const path = require('path');
+const HtmlWebPlugin = require('html-webpack-plugin');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
+/* const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin; */
+
+module.exports = {
+  target: 'web',
+  stats: 'errors-warnings',
+  mode: 'development',
+  devtool: 'inline-source-map',
+  entry: './src/index.tsx',
+  output: {
+    filename: 'js/[name].bundle.js',
+    chunkFilename: 'js/[name].chunk.js',
+    path: path.resolve(__dirname, '..', 'dist'),
+    assetModuleFilename: 'media/[name].[hash][ext]',
+    publicPath: '/',
+    clean: true,
+  },
+  cache: {
+    type: 'memory',
+    cacheUnaffected: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    plugins: [new TsconfigPathsPlugin()],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sass|less|scss|css)$/i,
+        exclude: /\.module\.scss$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.module\.(sass|less|scss|css)$/i,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]--[hash:base64:5]',
+              },
+            },
+          },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/images/[name].[hash][ext]',
+        },
+      },
+      {
+        test: /\.(ttf|woff|woff2|eot|otf)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/fonts/[name][ext]',
+        },
+      },
+      {
+        test: /.tsx?$/i,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            cacheCompression: false,
+          },
+        },
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebPlugin({
+      template: './index.html',
+    }),
+    new FaviconsWebpackPlugin({
+      logo: './public/favicon.ico',
+    }),
+    new Dotenv({
+      path: '.env',
+    }),
+    //new BundleAnalyzerPlugin(),
+  ],
+  optimization: {
+    moduleIds: 'deterministic',
+    runtimeChunk: 'multiple',
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+      },
+    },
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+  watchOptions: {
+    ignored: /node_modules/,
+  },
+};

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "webpack serve --config config/development.config.js --mode=development",
     "demo": "vite --host --mode demo",
+    "prod": "webpack --config config/production.config.js --mode=production",
     "build": "vite build",
     "preview": "vite preview",
     "prettier": "prettier --check src/**/*{.css,.scss,.ts,.tsx,.js,.jsx}",