Проблема оптимизации Webpack4

Question

это почти 2 часа ночи, и я просто схожу с ума в поисках ошибки.

"Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead." консоль говорила мне 100 раз ...

Я пытался изменить мой webpack.config.js следующим образом:

optimization: {
        minimize: false
      }

и это

  optimization: {
        minimizer: [
          // we specify a custom UglifyJsPlugin here to get source maps in production
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            uglifyOptions: {
              compress: false,
              ecma: 6,
              mangle: true
            },
            sourceMap: true
          })
        ]
      },

и всегда одна и та же проблема ...

С моими файлами все в порядке, потому что они тоже связаны, но когда я пытаюсь открыть их с помощью

"start": "webpack-dev-server --mode development --open --hot"

или

"start": "opener http://localhost:3000 & httpster -p 3000 -d ./dist"

ну, это не имеет значения, я читал много статей об этом, это какая-то проблема с версией webpack3 -> webpack4, но я скопировал некоторыекод для конфигурации и просто не могу понять, как это исправить (возможно, это потому, что я 12+ часов с ноутбуком один за другим и устала до чертиков, но я собираюсь спать и просто надеюсь, что когда я проснусьКто-то, великий человек, также поможет мне решить эту проблему.

Если вы какой-то человек, который хочет дать мне статью вместо ответа - это тоже здорово! Я полон знанийновые вещи.

Но, если вы поможете с ответом и статьей - это даст вам +100 к вашей удаче :)

my webpack.config.js и package.json ниже:

(я оставил это const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); только для того, чтобы показать вам, что я также пытался провести некоторую оптимизацию с этим)

/webpack.config.js


var webpack = require("webpack")
var path = require("path")
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
process.noDeprecation = true

module.exports = {
    entry: "./src/index.js",
    output: {
        path:path.join(__dirname, 'dist', 'assets'),
        filename: "bundle.js",
        sourceMapFilename: 'bundle.map'
    },
    devtool: '#source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'stage-0', 'react']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader', {
                    loader: 'postcss-loader',
                    options: {
                      plugins: () => [require('autoprefixer')]
                    }}]
            },
            {
                test: /\.scss/,
                use: ['style-loader','css-loader', {
                    loader: 'postcss-loader',
                    options: {
                      plugins: () => [require('autoprefixer')]
                    }}, 'sass-loader']
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            warnings: false,
            mangle: false
        })
    ]
}

    /package.json 

{
  "name": "try",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [
    "React",
    "state",
    "setState",
    "explicitly",
    "passing",
    "props"
  ],
  "author": "andrii",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "2.0.6",
    "style-loader": "^0.23.0",
    "uuid": "^3.3.2",
    "sass-loader": "6.0.6",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-preset-stage-2": "^6.24.1",
    "httpster": "1.0.3",
    "isomorphic-fetch": "^2.2.1",
    "prop-types": "^15.6.2",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-icons": "^3.1.0",
    "react-redux": "5.0.6",
    "react-router-dom": "^4.3.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack-dev-server": "^3.1.8"
  }
}

Также, чтобы избежать какого-либо злого настроения, я слушаю это: http://prntscr.com/l31bam при воспроизведении более 2 часов, если вы любите и классику, и пианино - эта композиция великолепна.

Спасибо за ваше время и хорошего дня!

Answer 1

Я использую webpack4 на производстве и должен также использовать UglifyJsPlugin.

Прежде всего, я хотел бы убедиться, что у вас есть правильная версия webpack и UglifyJsPlugin в вашем package.json У меня в настоящее время есть "webpack": "4.20.2", и "uglifyjs-webpack-plugin": "2.0.1", Чтобы убедиться, что они установлены правильно, я бы посоветовал еще раз проверить, что правильные версии установлены, запустив: rm -rf node_modules && npm install ИЛИ rm -rf node_modules && yarn install все, что работает для вас.

Далее я бы проверил конфигурацию.Мой webpack.production.js, который работает, выглядит следующим образом

 // ...

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

 // ...

     mode: 'production',
     optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false, // set to true if you want JS source maps
            }),
        ],
    },
    module: {
        //...
   },