// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
// Mode
mode: 'production',
// Entry Files
entry: {
main: './src/index.js',
vendor: './src/vendor.js',
},
// Output
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
// Module Resolution
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@styles': path.resolve(__dirname, 'src/styles'),
},
},
// Module Configuration
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: 'ts-loader',
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpg|gif|svg)$/,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
},
],
},
// Plugins
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
new BundleAnalyzerPlugin(),
],
// Optimization Configuration
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
new CssMinimizerPlugin(),
],
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 70000,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
automaticNameDelimiter: '~',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module, chunks, cacheGroupKey) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `${cacheGroupKey}.${packageName.replace('@', '')}`;
},
chunks: 'all',
},
},
},
runtimeChunk: 'single',
},
// Development Server Configuration
devServer: {
static: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
hot: true,
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:4000',
changeOrigin: true,
},
},
},
// Performance
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
// Development Tools
devtool: 'source-map',
// Target
target: 'web',
// Externals
externals: {
jquery: 'jQuery',
},
// Stats Configuration
stats: {
assets: true,
builtAt: true,
children: false,
chunks: false,
chunkModules: false,
chunkOrigins: false,
colors: true,
hash: true,
modules: false,
reasons: false,
timings: true,
version: false,
},
};
