MEAN NPM找不到模块'webpack / lib / optimize / CommonsChunkPlugin'错误

时间:2018-03-26 03:57:48

标签: node.js npm webpack

我在升级到最新的webpack时遇到了一些问题。我已经检查了以下线程,发现错误的原因是不推荐使用的类。

Webpack migration 3 -> 4: Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'

Webpack 4 migration CommonsChunkPlugin

唯一的问题是我没有在我的代码中使用这个类,但即使我更新了它,webpack本身也在某个地方引用它。

注意:我已尝试删除node_modules,清除缓存并重新安装

我通过MEAN生成了package.json,而package.json使用的启动脚本引用了一堆可能是问题的webpack脚本。

有趣的是以下警告,因此,我不确定它是否相关:

preload-webpack-plugin@2.3.0 requires a peer of webpack@^3.2.0 but none is installed. You must install peer dependencies yourself.

据说需要高于3.2.0的版本(我有4.2.0)。我不确定是不是因为它没有识别WebpackV4,或者V4是不是向后兼容

当前节点版本:9.8.0

我感谢任何想法/建议。 package.json和完整错误如下。如果我能提供任何进一步的信息,请告诉我

[0] > Mean@2.0.1 server:dev /Users/Sinan/Desktop/cllctroffcl
[0] > npm run webpack-dev-server -- --config config/webpack.dev.js --open -- 
progress --profile --watch --content-base src/
[0] 
[0] 
[0] > Mean@2.0.1 webpack-dev-server /Users/Sinan/Desktop/cllctroffcl
[0] > node --max_old_space_size=4096 node_modules/webpack-dev- 
server/bin/webpack-dev-server.js "--config" "config/webpack.dev.js" "--open" "--progress" "--profile" "--watch" "--content-base" "src/"
[0] 
[1] PC listening on 8888
[0] module.js:545
[0]     throw err;
[0]     ^
[0] 
[0] Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'
[0]     at Function.Module._resolveFilename (module.js:543:15)
[0]     at Function.Module._load (module.js:470:25)
[0]     at Module.require (module.js:593:17)
[0]     at require (internal/module.js:11:18)
[0]     at Object.<anonymous> 
(/Users/Sinan/Desktop/cllctroffcl/config/webpack.common.js:16:28)
[0]     at Module._compile (module.js:649:30)
[0]     at Object.Module._extensions..js (module.js:660:10)
[0]     at Module.load (module.js:561:32)
[0]     at tryModuleLoad (module.js:501:12)
[0]     at Function.Module._load (module.js:493:3)
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! Mean@2.0.1 webpack-dev-server: `node --max_old_space_size=4096 
node_modules/webpack-dev-server/bin/webpack-dev-server.js "--config" 
"config/webpack.dev.js" "--open" "--progress" "--profile" "--watch" "-- 
content-base" "src/"`
[0] npm ERR! Exit status 1
[0] npm ERR! 
npm ERR! Failed at the Mean@2.0.1 webpack-dev-server script.    
[0] npm ERR! This is probably not a problem with npm. There is likely 
additional logging output above.
[0] 
[0] npm ERR! A complete log of this run can be found in:
[0] npm ERR!     /Users/Sinan/.npm/_logs/2018-03-26T03_43_37_514Z-debug.log
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! Mean@2.0.1 server:dev: `npm run webpack-dev-server -- --config 
config/webpack.dev.js --open --progress --profile --watch --content-base 
src/`
[0] npm ERR! Exit status 1
[0] npm ERR! 
[0] npm ERR! Failed at the Mean@2.0.1 server:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional 
logging output above.
[0] 
[0] npm ERR! A complete log of this run can be found in:
[0] npm ERR!     /Users/Sinan/.npm/_logs/2018-03-26T03_43_37_532Z-debug.log
[0] npm run server:dev exited with code 1

Package.json

{
  "name": "Mean",
  "version": "2.0.1",
  "description": "A MEAN stack framework using Angular Webpack Starter kit - featuring Angular (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack",
  "keywords": [
    "angular",
    "angular2",
    "angular4",
    "webpack",
    "typescript"
  ],
  "author": "Lior Kesos <lior@linnovate.net>",
  "homepage": "http://mean.io",
  "license": "MIT",
  "scripts": {
    "build:aot:prod": "npm run clean:dist && npm run clean:aot && cross-env BUILD_AOT=1 npm run webpack -- --config config/webpack.prod.js  --progress --profile --bail",
    "build:aot": "npm run build:aot:prod",
    "build:dev": "npm run clean:dist && npm run webpack -- --config config/webpack.dev.js --progress --profile",
    "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
    "build:prod": "npm run clean:dist && npm run webpack -- --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "ci:aot": "npm run lint && npm run test && npm run build:aot && npm run e2e",
    "ci:jit": "npm run lint && npm run test && npm run build:prod && npm run e2e",
    "ci:nobuild": "npm run lint && npm test && npm run e2e",
    "ci:testall": "npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
    "ci:travis": "npm run lint && npm run test && npm run build:aot && npm run e2e:travis",
    "ci": "npm run ci:testall",
    "clean:dll": "npm run rimraf -- dll",
    "clean:aot": "npm run rimraf -- compiled",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll",
    "docker": "docker",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "e2e:live": "npm-run-all -p -r server:prod:ci protractor:live",
    "e2e:travis": "npm-run-all -p -r server:prod:ci protractor:delay",
    "e2e": "npm-run-all -p -r server:prod:ci protractor",
    "github-deploy:dev": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
    "github-deploy:prod": "npm run webpack -- --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
    "github-deploy": "npm run github-deploy:dev",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "node": "node",
    "postinstall": "npm run webdriver:update",
    "postversion": "git push && git push --tags",
    "preclean:install": "npm run clean",
    "preversion": "npm test",
    "protractor": "protractor",
    "protractor:delay": "sleep 3 && npm run protractor",
    "protractor:live": "protractor --elementExplorer",
    "rimraf": "rimraf",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --open --progress --profile --watch --content-base src/",
    "server:prod": "http-server dist -c-1 --cors",
    "server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "concurrently \"npm run server:dev\" \"nodemon --watch server server-start.js\" ",
    "start:prod": "NODE_ENV=production node server-start.js",
    "test": "npm run lint && karma start",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "webdriver-manager": "webdriver-manager",
    "webdriver:start": "npm run webdriver-manager start",
    "webdriver:update": "webdriver-manager update",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  },
  "dependencies": {
    "@angular/animations": "~5.2.9",
    "@angular/cdk": "~5.2.4",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "~5.2.9",
    "@angular/core": "^5.0.0",
    "@angular/forms": "~5.2.9",
    "@angular/http": "~5.2.9",
    "@angular/material": "~5.2.4",
    "@angular/platform-browser": "~5.2.9",
    "@angular/platform-browser-dynamic": "~5.2.9",
    "@angular/platform-server": "~5.2.9",
    "@angular/router": "~5.2.9",
    "@angularclass/hmr": "~2.1.3",
    "@angularclass/hmr-loader": "~3.0.2",
    "@ng-select/ng-select": "^0.30.1",
    "@reactivex/rxjs": "^5.4.3",
    "angular-in-memory-web-api": "~0.6.0",
    "angular2-universal": "2.1.0-rc.1",
    "apollo-angular": "^1.0.1",
    "apollo-client": "^1.4.2",
    "app-root-path": "^2.0.1",
    "babel-cli": "^6.24.1",
    "body-parser": "^1.17.2",
    "casual": "^1.5.14",
    "cookie-parser": "^1.4.3",
    "core-js": "^2.4.1",
    "cors": "^2.8.3",
    "dotenv": "^5.0.1",
    "express": "^4.15.3",
    "express-graphql": "^0.6.6",
    "express-jwt": "^5.3.0",
    "express-validation": "^1.0.2",
    "express-winston": "^2.4.0",
    "graphql": "^0.13.2",
    "graphql-server-express": "latest",
    "graphql-tag": "^2.2.2",
    "graphql-tools": "^2.23.1",
    "hammerjs": "^2.0.8",
    "helmet": "^3.6.1",
    "hll": "^1.1.0",
    "http-server": "^0.11.1",
    "http-status": "^1.0.1",
    "ie-shim": "^0.1.0",
    "innograph": "git://github.com/linnovate/innograph.git#devel",
    "joi": "^13.1.2",
    "jsonwebtoken": "^8.1.0",
    "long": "^4.0.0",
    "material": "^0.2.6",
    "method-override": "^2.3.9",
    "mongoose": "^5.0.11",
    "mongoose-double": "0.0.1",
    "morgan": "^1.8.2",
    "ng2-go-top-button": "^4.1.0",
    "ngx-carousel": "^1.3.5",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "preboot": "^5.0.0-rc.10",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.3",
    "sockjs-client": "^1.1.4",
    "winston": "^2.3.1",
    "zone.js": "latest"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.2.9",
    "@ngtools/webpack": "^1.10.2",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "2.8.6",
    "@types/node": "^9.6.0",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^3.0.0",
    "@types/webpack": "^4.1.2",
    "add-asset-html-webpack-plugin": "^2.1.3",
    "angular2-template-loader": "^0.6.2",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "~4.0.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.24.1",
    "codelyzer": "~4.2.1",
    "concurrently": "^3.4.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.0",
    "css-loader": "^0.28.0",
    "exports-loader": "^0.7.0",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "^1.1.11",
    "find-root": "^1.0.0",
    "gh-pages": "^1.1.0",
    "html-webpack-plugin": "^3.1.0",
    "imports-loader": "^0.8.0",
    "inline-manifest-webpack-plugin": "^3.0.1",
    "istanbul-instrumenter-loader": "3.0.0",
    "jasmine-core": "^3.1.0",
    "json-loader": "^0.5.4",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "~3.0.0",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "~4.1.2",
    "node-sass": "^4.5.2",
    "nodemon": "^1.11.0",
    "npm-run-all": "^4.0.2",
    "optimize-js-plugin": "0.0.4",
    "parse5": "^4.0.0",
    "preload-webpack-plugin": "^2.3.0",
    "protractor": "^5.1.1",
    "raw-loader": "0.5.1",
    "rimraf": "~2.6.1",
    "sass-loader": "^6.0.3",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "source-map-loader": "^0.2.1",
    "string-replace-loader": "~2.1.1",
    "style-loader": "~0.20.3",
    "to-string-loader": "^1.1.5",
    "ts-node": "~5.0.1",
    "tslib": "^1.6.1",
    "tslint": "~5.9.1",
    "tslint-loader": "^3.5.2",
    "typedoc": "^0.11.1",
    "typescript": "~2.7.2",
    "url-loader": "~1.0.1",
    "webpack": "~4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-middleware": "~3.0.1",
    "webpack-dev-server": "^3.1.1",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "~4.1.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/AngularClass/angular-starter.git"
  },
  "bugs": {
    "url": "https://github.com/AngularClass/angular-starter/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

1 个答案:

答案 0 :(得分:1)

我刚刚意识到这不是一个非常好思考的问题,但是因为其他人可能遇到这个问题我会继续提问。

问题是config / webpack.common.js已过期,并尝试调用此已弃用的类。

暂时解决方法是从config / webpack.common.js

注释掉以下部分
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

 new CommonsChunkPlugin({
         name: 'vendor',
         chunks: ['main'],
         minChunks: module => /node_modules/.test(module.resource)
       }),

  new ScriptExtHtmlWebpackPlugin({
    sync: /polyfill|vendor/,
    defaultAttribute: 'async',
    preload: [/polyfill|vendor|main/],
    prefetch: [/chunk/]

从webpack4开始,需要指定tsConfigPath。

您还需要进入

 ngcWebpack.NgcWebpackPlugin

并添加

tsConfigPath:  'tsconfig.webpack.json',

ScriptExtHtmlWebpack似乎是他们使用的外部库,在webpack 4下也是如此。

注意:显然,评论所有这些内容会对您的项目产生影响。如果你绝对必须使用网络包4,只想再次重复这是一个临时工作。

我创建了一个功能请求,您可以跟踪here

希望配置文件会在转换到MEAN 2时更新

希望这有帮助