Webpack生產模式不會縮小js文件

Question

我通過使用npm init -y初始化webpack創建了反應應用，然后手動修改了腳本和webpack配置文件。 我文件的內容如下：

package.json

{
  "name": "arw.ecahangirov",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
    "build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^3.2.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "weak-key": "^1.0.1",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.24.0",
    "style-loader": "^1.0.0"
  }
}

webpack.config.js

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx", ".css"]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        include: /\.js$/
      })
    ]
  }
};

問題是，當我運行npm run build ，webpack不會縮小輸出的main.js文件。 結果為716kb文件大小，通過打開輸出文件，我觀察到該文件是多行的，還包含注釋。 為什么webpack在這種情況下不關心最小化，盡管我是從--mode --mode production開始的？

Answer 1

您必須為CSS指定一個縮小器。

將其加載到您的webpack配置文件頂部

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

到規則塊：

rules: [
  //...
  {
    test: /\.(sa|sc|c)ss$/,
    use: [{loader: MiniCssExtractPlugin.loader},
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ],
  },
  //...
]

到優化塊：

optimization: { 
  minimizer: new OptimizeCSSAssetsPlugin({})
}

到插件塊：

plugins: [
  //...
  new MiniCssExtractPlugin({
    filename: [name].[hash].css',
    chunkFilename: '[id].[hash].css',
  }),
  //...
]

您將需要先加載該插件

npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

您可以在這里找到有效的配置