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(),    ],  },};