我尝试升级到webpack 4并以生产模式中的跟随错误结束：
webpack.optimize.UglifyJsPlugin已被删除，请改用config.optimization.minimize。
我删除了UglifyJsPlugin，但仍然产生相同的错误。 我还尝试将此代码块添加到我的配置中：
{
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,
}
这既未修正错误。
我的webpack.production.config.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"
}
}
感谢您的帮助：）
更新 我的package.json文件：
Warning The referenced component 'Microsoft.Win32.Primitives' could not be found.
Warning The referenced component 'System.IO.FileSystem' could not be found.
Warning The referenced component 'System.Security.Cryptography.X509Certificates' could not be found.
Warning The referenced component 'System.Globalization.Calendars' could not be found.
Warning The referenced component 'System.Security.Cryptography.Encoding' could not be found.
Warning The referenced component 'System.Security.Cryptography.Primitives' could not be found.
Warning The referenced component 'System.IO.Compression.ZipFile' could not be found.
Warning The referenced component 'System.Console' could not be found.
答案 0 :(得分：6)
您可以使用：
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 **