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