抛出新错误(`弃用通知:CommonsChunkPlugin现在只接受一个参数

时间:2017-10-17 00:27:30

标签: javascript angular typescript npm webpack

  • 我正在尝试使用webpack构建我的角度应用程序。
  • 所以我推荐了这个链接http://blog.teamtreehouse.com/26017-2
  • 我在package.json级别和package.json中创建了一个webpack.config.js我包含了这一行" bundle":" webpack"
  • 当我运行npm run bundle时我遇到错误npm ERR!在sleep@1.0.0捆绑脚本' webpack'
  • 上失败
  • 你能告诉我如何解决它。
  • 下面提供我的代码和错误

文件夹结构

import './rxjs-extensions';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { AppComponent }         from './app.component';

import {Base} from './components/base/base';
import {players} from './components/jumping/user';

require('./directives/yep-nope.controller');
require('./services/github-status.service');
require('./controllers/dashboard.controller');

import {
    Routes,
    RouterModule,
    Router,
    ActivatedRoute,

    CanActivateChild,
    CanDeactivate,
    ActivatedRouteSnapshot,
    RouterStateSnapshot
} from "@angular/router";


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ReactiveFormsModule,
    HttpModule,
    routing,
    MultiselectDropdownModule,
    AccordionModule
  ],
  declarations: [
    AppComponent,
  Base,
  jumping,
  players
  ],
  providers: [
  SPORTSService],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

app.module.ts

{
  "name": "SPORTS",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "test": "tsc && concurrently \"karma start karma.conf.js\"",
    "bundle": "webpack"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "@types/underscore": "^1.8.1",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "latest-version": "^2.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "jasmine-core": "~2.4.1",
    "jasmine-expect": "^3.0.1",
    "jasmine-jquery": "^2.1.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-coverage": "^1.1.1",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "karma-jquery": "^0.1.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-typescript": "^2.1.4",
    "karma-typescript-preprocessor": "^0.3.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "webpack": "^3.7.1"
  }
}

的package.json

var webpack = require('webpack');
module.exports = {
    context: __dirname + '/app',
        entry: {
            app: './app.js',
            vendor: ['angular']
        },
        output: {
            path: __dirname + '/js',
            filename: 'app.bundle.js'
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
        ]
    };

webpack.config.js

$ npm run bundle

错误

> sports@1.0.0 bundle C:\Users\webcomponent\src\main\webapp
> webpack

C:\Users\webcomponent\src\main\webapp\node_modules\webpack\lib\optimize\CommonsChunkPlugin.js:11
                        throw new Error(`Deprecation notice: CommonsChunkPlugin now only takes a single argument. Either an options
                        ^

Error: Deprecation notice: CommonsChunkPlugin now only takes a single argument. Either an options
object *or* the name of the chunk.
Example: if your old code looked like this:
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')
You would change it to:
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' })
The available options are:
        name: string
        names: string[]
        filename: string
        minChunks: number
        chunks: string[]
        children: boolean
        async: boolean
        minSize: number
    at new CommonsChunkPlugin (C:\Users\webcomponent\src\main\webapp\node_modules\webpack\lib\optimize\CommonsChunkPlugin.js:11:10)
    at Object.<anonymous> (C:\Users\webcomponent\src\main\webapp\webpack.config.js:13:13)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (C:\Users\webcomponent\src\main\webapp\node_modules\webpack\bin\convert-argv.js:97:18)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "bundle"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! sports@1.0.0 bundle: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sports@1.0.0 bundle script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sports package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs sports
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls sports
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\webcomponent\src\main\webapp\npm-debug.log

$ npm run bundle

{{1}}

1 个答案:

答案 0 :(得分:2)

webpack.config.js中,您应该更改此内容:

new webpack.optimize.CommonsChunkPlugin(
    /* chunkName= */"vendor", /* filename= */"vendor.bundle.js")

为:

new webpack.optimize.CommonsChunkPlugin(
    {name:"vendor", filename:"vendor.bundle.js",})

这应该有用。