亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Webpack 沒有最小化生產中的 JavaScript 文件

Webpack 沒有最小化生產中的 JavaScript 文件

慕絲7291255 2023-06-29 21:05:49
我是 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,

      },

    }),

  ],

},


查看完整回答
反對 回復 2023-06-29
?
UYOU

TA貢獻1878條經驗 獲得超4個贊

看來你只對你的 scss 文件進行最小化,如果你想縮小你的 javascript 文件,你將需要一個插件,如Uglify,你只需將它導入頂部并將其添加到 optimization.minimizer 中,就像它說的那樣在插件頁面示例中:


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

 

module.exports = {

  optimization: {

    minimizer: [new UglifyJsPlugin()],

  },

};


查看完整回答
反對 回復 2023-06-29
?
千萬里不及你

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

    ],

  },

};


查看完整回答
反對 回復 2023-06-29
  • 3 回答
  • 0 關注
  • 203 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號