![](/img/trans.png)
[英]Webpack 5 multiple javascript files produces 0 bytes bundle in production mode
[英]Webpack is not minimiziing my JavaScript files in production
我是 react.js 的新手,目前正在开发 react.js 项目,该项目在开发环境中运行 100% 正常,没有任何错误。 在我以生产模式构建项目后,它不会缩小我的 javascript 文件。 但是我的 scss 文件被缩小了。
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "production",
entry: {
main: "./src/index.js",
vendor: "./src/vendor.js",
},
output: {
filename: "[name].[contentHash].bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs",
},
},
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
},
}),
],
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
new CleanWebpackPlugin(),
],
};
请有人帮我解决这个问题,并为我的英语不好而感到抱歉。
webpack 的默认 javascript 最小化插件是TerserPlugin 。 当您设置minimizer
的下属性optimizaton
,这将覆盖的WebPack本身提供的默认值。 为了克服这个问题的附加TerserPlugin您webpack.config.js
文件,并将其传递到minimizer
的属性。
const TerserPlugin = require("terser-webpack-plugin");
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCssAssetsPlugin(),
new HtmlWebpackPlugin({
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
},
}),
],
},
似乎您只有 scss 文件的最小化,如果您还想缩小 javascript 文件,则需要一个插件,例如Uglify ,您只需将其导入顶部并将其添加到 optimization.minimizer 就像它说的在插件页面示例中:
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
MiniCssExtractPlugin 会将您的 CSS 提取到一个单独的文件中,并为每个包含 CSS 的 JS 文件创建一个 CSS 文件。 它不会缩小您的 CSS 文件。
导入css-minimizer-webpack-plugin
进行缩小。 您可以根据您的环境配置缩小。
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const { getIfUtils } = require('webpack-config-utils') const {ifProduction, ifNotProduction} = getIfUtils(process.env.NODE_ENV) module.exports = { module: { loaders: [ { test: /.s?css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], }, ], }, optimization: { minimize: ifProduction(true, false), minimizer: [ new CssMinimizerPlugin(), ], }, };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.