【问题标题】:Webpack 4 and Uglify Plugin (TypeError: Cannot read property 'length' of undefined)Webpack 4 和 Uglify 插件(TypeError:无法读取未定义的属性“长度”)
【发布时间】:2018-07-09 10:22:23
【问题描述】:

我在 Linux 机器上遇到了 Webpack 4 的问题。构建在开发模式下工作正常,但在生产中失败。它似乎也在 Windows 机器上工作。我确实尝试将 webpack 降级到旧版本,但什么也没做。

节点: 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'
    }
}

【问题讨论】:

  • 您能否提供更多详细信息,例如 webpack 配置文件、package.json 或任何相关内容?
  • 刚刚添加了 webpack.config.js 和 packge.json
  • 您的uglifyjs-webpack-plugin 版本已有一岁了。可能是因为这个。看看npm install -S uglifyjs-webpack-plugin@latest 是否解决了问题。
  • 顺便问一下,npm 在你的依赖项中有什么原因吗?
  • @Aankhen 什么都没有。我认为这与版本无关。

标签: javascript node.js webpack yarnpkg webpack-plugin


【解决方案1】:

在 Webpack v4 中将 mode 设置为 production 应该会进行足够的优化,因此无需特别要求 Uglify 插件。尝试删除uglifyjs-webpack-plugin,也不需要为build 脚​​本传递-p 标志。

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

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

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

最后,我有一个基本的 webpack v4 入门样板,包含 Github 上的所有最新生态系统,take a look,看看它是否对你有帮助

【讨论】:

  • 删除 uglifyjs-webpack-plugin 没有帮助,我认为 webpack 在 prod 模式下默认使用 uglifyjs。
  • 我还是遇到了同样的问题,我认为它与节点有关。
  • 好的,那么问题可能出在其他地方,因为样板可以在我的机器和我同事的机器上运行
猜你喜欢
  • 2018-10-28
  • 2018-09-19
  • 2020-06-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-16
  • 2021-12-05
相关资源
最近更新 更多