Webpack 4和Uglify插件（TypeError：无法读取未定义的属性'length'）

Question

我在Linux机器上使用Webpack 4时遇到了问题。开发模式下构建正常，但生产模式下失败。在Windows机器上似乎可以正常工作。我尝试将Webpack降级到旧版本，但仍然无法解决问题。

Nodejs版本为：v10.2.1

 *TypeError: Cannot read property 'length' of undefined* at node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:59
        this.workers = workers === true ? _os2.default.cpus().length - 1 : Math.min(Number(workers) || 0, _os2.default.cpus().length - 1);

packge.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack -p"
  },
  "devDependencies": {},
  "dependencies": {
    "@types/node": "^10.5.1",
    "css-loader": "^0.28.11",
    "global": "^4.3.2",
    "node-sass": "^4.9.1",
    "npm": "^6.1.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "uglifyjs-webpack-plugin": "1.0.0-beta.2",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8"
  }
}

webpack.config.js

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var webpack = require('webpack');
module.exports = {
    entry: './src/index.ts',
    devtool: 'source-map',
     mode: 'production',
     module: {
             rules: [{
                 test: /\.tsx?$/,
                 use: 'ts-loader',
                 exclude: /node_modules/
             },
             {
                 test: /\.scss$/,
                 use: ['style-loader', 'css-loader', 'sass-loader'],
                 exclude: /node_modules/
             }
            ],
         },
    resolve: {
             extensions: ['.tsx', '.ts', '.js','.css','.scss']
         },
    plugins: [
        new UglifyJsPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    }
}

- yacine benzmane

---

刚刚添加了 webpack.config.js 和 package.json。 - yacine benzmane

你的 uglifyjs-webpack-plugin 版本已经一年没有更新了。这可能是问题所在。尝试使用 npm install -S uglifyjs-webpack-plugin@latest 命令来解决这个问题。 - Aankhen

顺便问一下，为什么你的依赖中有 npm？ - Aankhen

@Aankhen 没有什么。我不认为它与版本有关。 - yacine benzmane

好的。你的生产构建是在同一台机器上但使用不同的 NODE_ENV（或其他变量）还是在另一台机器上？ - Aankhen

Answer 1

在Webpack v4中，将mode设置为production应该足以进行足够的优化，因此没有必要专门要求Uglify插件。尝试移除uglifyjs-webpack-plugin，并且构建脚本中也不需要传递-p标志。

如果您想自定义Uglify插件，也可以在Webpack的optimization配置中进行，详见https://webpack.js.org/configuration/optimization/。

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

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ /* your config */ })
    ]
  }
};

最后，我在Github上提供了一个基本的webpack v4入门样板，集成了最新的生态系统，查看一下，看看它是否对您有帮助。

- zenoh

---

移除uglifyjs-webpack-plugin并没有起到作用，我认为在生产模式下webpack默认使用uglifyjs。 - yacine benzmane

我仍然遇到了相同的问题，我认为这是与节点有关的。 - yacine benzmane

好的，那问题可能出在其他地方，因为这个样板在我的电脑和同事的电脑上都能正常工作。 - zenoh