我的项目曾经最小化Javascript用于生产，但现在我再次检查它，它没有。我已经移动了插件和编辑各种各样的东西，试图让它再次工作，但我不能。有人能帮帮我吗?
我还设置了target: ['web', 'es5']，但这不会将javascript转换为es5。
我想是我加载东西的顺序导致了这个问题，但我不知道确切的原因。
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"
}
}
最后是运行构建脚本时的输出
> 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 hero-image@2x.png 301 KiB [compared for emit] [from: src/assets/images/modules/hero/hero-image@2x.png] [minimized] [big]
asset hero-image.png 84.8 KiB [compared for emit] [from: src/assets/images/modules/hero/hero-image.png] [minimized]
asset car-base@2x.png 42.1 KiB [compared for emit] [from: src/assets/images/modules/calculators/car-base@2x.png] [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:
hero-image@2x.png (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
我还必须扩展默认优化。
optimization: {
minimizer: [new CssMinimizerPlugin(), "..."],
},