```json // webpack.common.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { entry: { app: './src/index.tsx' }, output: { filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Webpack', template: './src/index.html', filename: 'index.html' }) ], module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', include: path.resolve(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, resolve: { extensions: ['.tsx', '.ts', '.js'] }, optimization: { usedExports: true, moduleIds: 'deterministic', runtimeChunk: 'single', splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'all' } } }, minimizer: [ new TerserPlugin( { extractComments: false } ) ] } }; ``` --- ```json // webpack.dev.js const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', stats: 'errors-only', port: 5566, hot: true } }); ``` --- ```json // webpack.prod.js const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production' }); ```