Блог

Я новичок в 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(),
  ],
};
  

Пожалуйста, кто-нибудь, помогите мне решить эту проблему и извините за мой плохой английский.

Плагин минимайзера javascript по умолчанию для webpack — это 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(),
    ],
  },
};