Webpack4 优化问题

Posted 2023-02-22

【中文标题】Webpack4 优化问题

【英文标题】：Webpack4 optimization issue

【发布时间】：2019-03-12 00:54:13

【问题描述】：

已经快凌晨 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 的运气 :)

下面是我的 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 小时 - 这首曲子很棒。

感谢您的宝贵时间，祝您有愉快的一天！

【参考方案1】：

我在生产环境中使用 webpack4，并且还必须使用 UglifyJsPlugin。

首先我会确保你的 package.json 中有正确版本的 webpack 和 UglifyJsPlugin 我目前有 "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: 
        //...
   ,