我是 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(), ],};请有人帮助我解决这个问题，并对我的英语不好表示歉意。
3 回答
慕桂英4014372
TA贡献1871条经验 获得超13个赞
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,
},
}),
],
},
UYOU
TA贡献1878条经验 获得超4个赞
看来你只对你的 scss 文件进行最小化，如果你想缩小你的 javascript 文件，你将需要一个插件，如Uglify，你只需将它导入顶部并将其添加到 optimization.minimizer 中，就像它说的那样在插件页面示例中：
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
千万里不及你
TA贡献1784条经验 获得超9个赞
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(),
],
},
};
添加回答
举报
0/150
提交
取消