Task2 webpack

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+build

babel.config.json

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "ssr": false,
+        "pure": true
+      }
+    ]
+  ]
+}

config/webpack.config.common.ts

@@ -0,0 +1,47 @@
+import { Configuration } from "webpack";
+import { join, resolve } from "path";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+
+export const config: Configuration = {
+  entry: resolve("src", "index.tsx"),
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ["babel-loader"],
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: ["ts-loader"],
+      },
+      {
+        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
+        use: ["file-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: join("src", "index.html"),
+    }),
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /node_modules/,
+          name: "vendors",
+          chunks: "all",
+        },
+      },
+    },
+    runtimeChunk: {
+      name: "manifest",
+    },
+  },
+};

config/webpack.config.dev.ts

@@ -0,0 +1,22 @@
+
+import { merge } from 'webpack-merge';
+import { resolve } from 'path';
+
+import { config } from './webpack.config.common';
+import { WebpackDevConfiguration } from './webpack.models';
+
+export const webpackDevConfigPart: WebpackDevConfiguration = {
+  mode: 'development',
+  devtool: 'source-map',
+  output: {
+    path: resolve("build"),
+    filename: "[name].bundle.js",
+    clean: true,
+  },
+  devServer: {
+    open: true,
+    hot: true,
+  },
+};
+
+export default merge(config, webpackDevConfigPart);

config/webpack.config.prod.ts

@@ -0,0 +1,34 @@
+import { resolve } from 'path';
+import { Configuration } from "webpack";
+import { merge } from "webpack-merge";
+import CompressionPlugin from "compression-webpack-plugin";
+
+import { config } from "./webpack.config.common";
+
+const webpackProdConfigPart: Configuration = {
+  mode: "production",
+  output: {
+    path: resolve("build"),
+    filename: "[name].[chunkhash].bundle.js",
+    clean: true,
+  },
+  performance: {
+    hints: "warning",
+    maxAssetSize: 1_000_000,
+    // Calculates sizes of gziped bundles.
+    assetFilter: function (assetFilename: string) {
+      return assetFilename.endsWith(".js.gz");
+    },
+  },
+  plugins: [
+    /**
+     * cast to any since the plugin type is incompatible with webpack 5
+     * https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55708
+     */
+    new CompressionPlugin({
+      algorithm: "gzip",
+    }) as any,
+  ],
+};
+
+export default merge(config, webpackProdConfigPart);

config/webpack.models.ts

@@ -0,0 +1,6 @@
+import { Configuration } from 'webpack';
+import { Configuration as WebpackDevServerConfig } from 'webpack-dev-server';
+
+export interface WebpackDevConfiguration extends Configuration {
+  devServer: WebpackDevServerConfig;
+}