Menu
I tried to upgrade to webpack 4 and ended in following error in production mode:
webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.`
I removed the UglifyJsPlugin but still the same error accrues. Also I tried to add this code block to my config:
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true,
}),
],
}
This neither fixed the error.
My webpack.production.config.json looks like this:
{
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,
}
thanks for your help :)
Update: my package.json file:
{
"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"
}
}
642
You can use this:
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
...
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: { ... }
})
]
}
And some more options:
module.exports = {
// ...
plugins: [
// ... other plugins
optimization: {
minimizer: [
//https://github.com/mishoo/UglifyJS2/tree/harmony
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false
},
minify: {},
compress: {
booleans: true,
//...
}
}
}),
]
},
]
// ...
}
more discussion: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047
similar question in stackoverflow: https://stackoverflow.com/a/49059746/6200607
In Webpack docs: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
** Edit: replaced UglifyJSPlugin with UglifyJsPlugin **
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
