Webpack 没有最小化生产中的 JavaScript 文件

Question

我是 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(),  ],};请有人帮助我解决这个问题，并对我的英语不好表示歉意。

Answer 1

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,

      },

    }),

  ],

},

Answer 2

看来你只对你的 scss 文件进行最小化，如果你想缩小你的 javascript 文件，你将需要一个插件，如Uglify，你只需将它导入顶部并将其添加到 optimization.minimizer 中，就像它说的那样在插件页面示例中：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

 

module.exports = {

  optimization: {

    minimizer: [new UglifyJsPlugin()],

  },

};

Answer 3

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(),

    ],

  },

};