reactjs - 升级到webpack 4 UglifyJsPlugin报错

Question

我尝试升级到 webpack 4，但在生产模式下出现以下错误:

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.`

我删除了 UglifyJsPlugin，但仍然出现相同的错误。我还尝试将此代码块添加到我的配置中:

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      cache: true,
      parallel: true,
      sourceMap: true,
    }),
  ],
}

这并没有修复错误。

我的 webpack.production.config.json 看起来像这样:

{
  entry: [appIndexJs],

  output: {
    path: appBuild,
    publicPath: '/',
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'babel-loader',
        },
        include: appSrc,
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
        use: 'file-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              progressive: true,
              optimizationLevel: 7,
              interlaced: false,
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: 'html-loader',
      },
      {
        test: /\.md/,
        use: [
          'html-loader',
          'markdown-loader',
        ],
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
          },
        },
      },
    ],
  },

  plugins: [
    new webpack.ProvidePlugin({
      fetch: 'exports-loader?self.fetch!whatwg-fetch',
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      excludes: ['.htaccess'],
      caches: {
        main: [':rest:'],
      },
      safeToUseOptionalCaches: true,
      AppCache: false,
    }),
  ],

  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    alias: {
      styles,
    },
  },

  mode: 'production',

  bail: true,
}

感谢您的帮助:)

更新:我的 package.json 文件:

{
  "name": "react-start",
  "version": "1.0.0",
  "description": "Easy starter kit for creating react apps.",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/lItc0de/react-start.git"
  },
  "author": "Basti Paintner @lItcode",
  "license": "MIT",
  "engines": {
    "node": ">=6"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=development node server",
    "build": "yarn coverage && cross-env NODE_ENV=production node scripts/build.js",
    "serve": "cross-env NODE_ENV=production HTTPS=true node server",
    "prod": "yarn build && yarn serve",
    "test": "cross-env NODE_ENV=test jest",
    "test:debug": "cross-env NODE_ENV=test node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watchAll",
    "coverage": "yarn test --coverage",
    "watch": "cross-env NODE_ENV=test jest --watchAll",
    "build:dll": "node scripts/buildDll.js",
    "lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
    "lint:css": "stylelint",
    "lint:staged": "lint-staged",
    "storybook": "start-storybook -p 9001 -c config/storybook",
    "postinstall": "yarn build:dll"
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "lint:eslint",
      "lint:css"
    ]
  },
  "pre-commit": "lint:staged",
  "babel": {
    "plugins": [
      "styled-components",
      "transform-decorators-legacy"
    ],
    "presets": [
      [
        "env",
        {
          "modules": false
        }
      ],
      "react",
      "stage-0",
      "flow"
    ],
    "env": {
      "production": {
        "only": [
          "src"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },
      "test": {
        "plugins": [
          "transform-es2015-modules-commonjs",
          "dynamic-import-node"
        ]
      }
    }
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "extends": "airbnb",
    "env": {
      "browser": true,
      "node": true,
      "jest": true,
      "es6": true
    },
    "plugins": [
      "react",
      "jsx-a11y",
      "flowtype"
    ],
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "rules": {
      "arrow-parens": [
        "error",
        "always"
      ],
      "arrow-body-style": [
        2,
        "as-needed"
      ],
      "class-methods-use-this": 0,
      "comma-dangle": [
        2,
        "always-multiline"
      ],
      "import/imports-first": 0,
      "import/newline-after-import": 0,
      "import/no-dynamic-require": 0,
      "import/no-extraneous-dependencies": 0,
      "import/no-named-as-default": 0,
      "import/no-unresolved": 2,
      "import/no-webpack-loader-syntax": 0,
      "import/prefer-default-export": 0,
      "indent": [
        "error",
        2,
        {
          "SwitchCase": 1
        }
      ],
      "jsx-a11y/aria-props": 2,
      "jsx-a11y/heading-has-content": 0,
      "jsx-a11y/label-has-for": 2,
      "jsx-a11y/mouse-events-have-key-events": 2,
      "jsx-a11y/role-has-required-aria-props": 2,
      "jsx-a11y/role-supports-aria-props": 2,
      "max-len": 0,
      "newline-per-chained-call": 0,
      "no-confusing-arrow": 0,
      "no-console": 1,
      "no-use-before-define": 0,
      "no-param-reassign": [
        "error",
        {
          "props": false
        }
      ],
      "prefer-template": 2,
      "react/forbid-prop-types": 0,
      "react/jsx-first-prop-new-line": [
        2,
        "multiline"
      ],
      "react/jsx-filename-extension": 0,
      "react/jsx-no-target-blank": 0,
      "react/require-default-props": 0,
      "react/require-extension": 0,
      "react/self-closing-comp": 0,
      "require-yield": 0,
      "flowtype/define-flow-type": 1,
      "flowtype/use-flow-type": 1
    },
    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "./config/webpack/webpack.config.prod.js"
        }
      }
    }
  },
  "stylelint": {
    "processors": [
      "stylelint-processor-styled-components"
    ],
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-styled-components"
    ],
    "syntax": "scss",
    "rules": {
      "number-leading-zero": "never"
    }
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/**/*.test.{js,jsx}",
      "!src/*/RbGenerated*/*.{js,jsx}",
      "!src/index.js",
      "!src/i18n.js",
      "!src/styles/**/*.js",
      "!src/*/*/Loadable.{js,jsx}"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 98,
        "branches": 91,
        "functions": 98,
        "lines": 98
      }
    },
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "moduleNameMapper": {
      ".*\\.(css|less|styl|scss|sass)$": "<rootDir>/config/mocks/cssModule.js",
      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/mocks/image.js",
      ".*\\.(md)$": "<rootDir>/config/mocks/md.mock.js",
      "i18next-resource-store-loader!./locales/index": "<rootDir>src/locales/en/translation.json"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/config/setup.tests.js",
    "testRegex": "tests/.*\\.test\\.js$"
  },
  "dllPlugin": {
    "exclude": [
      "chalk",
      "compression",
      "cross-env",
      "express",
      "ip",
      "minimist",
      "sanitize.css"
    ],
    "include": [
      "core-js",
      "lodash",
      "eventsource-polyfill"
    ]
  },
  "dependencies": {
    "chalk": "^2.3.0",
    "colors.js": "^1.2.4",
    "compression": "^1.7.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.2",
    "fontfaceobserver": "^2.0.13",
    "i18next": "^10.3.0",
    "i18next-browser-languagedetector": "^2.1.0",
    "ip": "^1.1.5",
    "minimist": "^1.2.0",
    "mobx": "^4.1.0",
    "mobx-react": "^5.0.0",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-helmet": "^5.2.0",
    "react-i18next": "^7.3.4",
    "react-loadable": "^5.3.1",
    "react-router-dom": "^4.2.2",
    "sanitize.css": "^5.0.0",
    "styled-components": "^3.1.6",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.15",
    "@storybook/addon-info": "^3.3.15",
    "@storybook/addon-options": "^3.3.15",
    "@storybook/addons": "^3.3.15",
    "@storybook/react": "^3.3.15",
    "add-asset-html-webpack-plugin": "^2.1.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.1.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-styled-components": "^1.4.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-react-inline-elements": "^6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
    "circular-dependency-plugin": "^5.0.1",
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.9",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-import-resolver-webpack": "^0.8.4",
    "eslint-plugin-flowtype": "^2.42.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.6",
    "flow-bin": "^0.68.0",
    "fs-extra": "^5.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.1.0",
    "i18next-resource-store-loader": "^0.1.2",
    "image-webpack-loader": "^4.0.0",
    "jest": "^22.1.1",
    "lint-staged": "^7.0.0",
    "markdown-loader": "^2.0.2",
    "offline-plugin": "^4.9.0",
    "pre-commit": "^1.2.2",
    "react-dev-utils": "^5.0.0",
    "react-test-renderer": "^16.2.0",
    "request": "2.85.0",
    "shelljs": "^0.8.1",
    "sinon": "^4.4.2",
    "style-loader": "^0.20.1",
    "stylelint": "^9.0.0",
    "stylelint-config-standard": "^18.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.2.2",
    "typescript": "^2.7.2",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "url-loader": "^1.0.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-middleware": "^3.1.0",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-merge": "^4.1.2"
  }
}

Answer 1

你可以使用这个:

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

...

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: { ... }
    })
  ]
}

<小时/>

还有更多选项:

module.exports = {
  // ...
  plugins: [
    // ... other plugins
    optimization: {
    minimizer: [
        //https://github.com/mishoo/UglifyJS2/tree/harmony
        new UglifyJsPlugin({
            uglifyOptions: {
                output: {
                    comments: false
                },
                minify: {},
                compress: {
                    booleans: true,
                    //...
                }
            }
        }),
    ]
  },
  ]
  // ...
}

更多讨论: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047

stackoverflow 中的类似问题: https://stackoverflow.com/a/49059746/6200607

在 Webpack 文档中: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

** 编辑:用 UglifyJsPlugin 替换 UglifyJSPlugin **