Webpack GZip压缩创建许多bundles / .gz文件而不是1个完整的bundle？

Question

当我使用npm运行构建脚本时，我正在使用gzip压缩来构建我的react项目（这是一个完整的堆栈应用程序），我没有遇到任何错误，但是在此过程中，它又将我的10个捆绑包和10个捆绑在一起。 gz文件扩展名而不是一个，我不确定为什么吗？

这是我的代码：

生产Webpack

const webpack = require("webpack");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  entry: ["babel-polyfill", __dirname + "/src/index.js"],
  output: {
    path: __dirname + "/public",
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          query: {
            presets: ["react", "env", "stage-0"]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      }
    ]
  },
  plugins: [
    new CompressionPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      minRatio: 0.8,
      threshold: 10240
    }),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("production")
    })
  ]
};

NPM构建脚本

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "client": "webpack-dev-server --port 3312 --progress --color --profile --config webpack.development.config.js --mode development --hot",
    "clean": "rm -rf build public/bundle.js",
    "server": "nodemon server/main.js",
    "sass": "node-sass -w public/assets/scss -o public/assets/css/ --recursive",
    "dev": "concurrently \"npm run server\" \"npm run sass\" \"npm run client\"",
    "prod": "npm run clean && webpack --config webpack.production.config.js --mode production --progress --colors --profile"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.373.0",
    "base-64": "^0.1.0",
    "body-parser": "^1.18.3",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.5",
    "data-tip": "0.0.52",
    "express": "^4.16.4",
    "file-type": "^10.6.0",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "mysql": "^2.16.0",
    "nodemailer": "^4.7.0",
    "nodemailer-juice": "^1.0.1",
    "paypal-rest-sdk": "^1.8.1",
    "react": "^16.6.3",
    "react-bootstrap": "^0.32.4",
    "react-ckeditor-component": "^1.1.0",
    "react-confirm-alert": "^2.0.7",
    "react-dom": "^16.6.3",
    "react-js-pagination": "^3.0.2",
    "react-loadable": "^5.5.0",
    "react-router-dom": "^4.3.1",
    "react-s3-uploader": "^4.8.0",
    "read-chunk": "^3.0.0",
    "sha256": "^0.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "compression-webpack-plugin": "^2.0.0",
    "concurrently": "^4.1.0",
    "css-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

输出屏幕截图：

Answer 1

这是因为您使用的是Webpack 4，它带有自动代码拆分功能。您可以在此处阅读如何配置它：

https://webpack.js.org/guides/code-splitting/