My project used to minify the Javascript for production but now that I check it again, it does not. I have moved around plugins and edited various things to try and get it working again but I can't. Please can someone help me?
I also set target: ['web', 'es5'] but that doesn't convert the javascript to es5.
I imagine the order I load things in causes this issue but I can't figure out what exactly.
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const path = require("path");
module.exports = {
entry: {
index: "./src/app",
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "[name][ext]",
clean: true,
},
target: ["web", "es5"],
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [["postcss-preset-env"]],
},
},
},
"sass-loader",
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
type: "asset",
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: "asset/resource",
},
],
},
optimization: {
minimizer: [new CssMinimizerPlugin()],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
meta: {
description: {
name: "description",
content:
"A calculator used to work out the maximum travel distance according to the speed, temperature, temperature control and wheel size",
},
},
}),
new ImageMinimizerPlugin({
minimizerOptions: {
plugins: [
["mozjpeg", { quality: 72 }],
["pngquant", { strip: true, quality: [0.7, 0.7] }],
],
},
}),
new MiniCssExtractPlugin(),
],
devServer: {
hot: true,
},
};
package.json
{
"name": "sendcloud-technical-assessment",
"version": "1.0.0",
"description": "...",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode=development",
"build": "webpack --mode=production"
},
"author": "...",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.2.0",
"css-minimizer-webpack-plugin": "^3.0.2",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"image-minimizer-webpack-plugin": "^2.2.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.2",
"mini-css-extract-plugin": "^2.2.0",
"postcss": "^8.3.6",
"postcss-loader": "^6.1.1",
"postcss-preset-env": "^6.7.0",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
},
"dependencies": {
"normalize.css": "^8.0.1"
}
}
And finally the output when I run the build script
> webpack --mode=production
assets by chunk 172 KiB (auxiliary name: index)
assets by path *.woff 97.4 KiB 3 assets
assets by path *.woff2 75 KiB
asset montserrat-bold-webfont.woff2 25.2 KiB [compared for emit] [from: src/assets/fonts/montserrat-bold-webfont.woff2] (auxiliary name: index)
asset montserrat-regular-webfont.woff2 24.9 KiB [compared for emit] [from: src/assets/fonts/montserrat-regular-webfont.woff2] (auxiliary name: index)
asset montserrat-light-webfont.woff2 24.8 KiB [compared for emit] [from: src/assets/fonts/montserrat-light-webfont.woff2] (auxiliary name: index)
assets by path *.png 441 KiB
asset [email protected] 301 KiB [compared for emit] [from: src/assets/images/modules/hero/[email protected]] [minimized] [big]
asset hero-image.png 84.8 KiB [compared for emit] [from: src/assets/images/modules/hero/hero-image.png] [minimized]
asset [email protected] 42.1 KiB [compared for emit] [from: src/assets/images/modules/calculators/[email protected]] [minimized]
asset car-base.png 12.7 KiB [compared for emit] [from: src/assets/images/modules/calculators/car-base.png] [minimized]
assets by chunk 35.1 KiB (name: index)
asset bundle.js 20.8 KiB [compared for emit] (name: index)
asset index.css 14.3 KiB [compared for emit] [minimized] (name: index)
asset index.html 75.1 KiB [compared for emit]
Entrypoint index 35.1 KiB (172 KiB) = index.css 14.3 KiB bundle.js 20.8 KiB 6 auxiliary assets
orphan modules 19.9 KiB [orphan] 6 modules
cacheable modules 20 KiB (javascript) 20 KiB (css/mini-extract)
./src/app/index.js + 5 modules 20 KiB [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss 14 KiB [built] [code generated]
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
[email protected] (301 KiB)
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.51.1 compiled with 2 warnings in 3788 ms
I had to spread the default optimizations as well.