The webpack.config.js is not optimized for production.
const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const options = {};
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env, argv) => {
const isProduction = argv.mode === "production";
const isDevelopment = !isProduction;
return {
mode: isProduction ? argv.mode : 'development',
entry: {
app: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js',
// clean: true,
assetModuleFilename: '[name][ext]'
},
devtool: 'source-map',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 443,
// open: true,
// hot: true,
// compress: true,
// historyApiFallback: true,
writeToDisk: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
// publicPath: '/assets/images/',
}
},
},
{
test: /\.(ttf|eot|svg|woff|woff2)(\?[\s\S]+)?$/,
include: path.resolve(__dirname, './node_modules/@fortawesome/fontawesome-free/webfonts'),
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'dist',
publicPath: '/dist/webfonts/',
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new WebpackManifestPlugin(options),
new MiniCssExtractPlugin({
ignoreOrder: false
})
/* new HtmlWebpackPlugin({
title: 'ZAP-Suite Login Webpack',
filename: '../index.html',
template: './src/template.html'
}) */
],
optimization: {
minimizer: [
new TerserJSPlugin({}),
new CssMinimizerPlugin()
],
},
performance: {
maxEntrypointSize: 1024000,
maxAssetSize: 1024000
},
watchOptions: {
ignored: ['./node_modules/']
}
}
};
I have followed the following tutorial on Youtube: