javascript - 抛出新错误(`弃用通知 : CommonsChunkPlugin now only takes a single argument

标签 javascript angular typescript npm webpack

  • 我正在尝试使用 webpack 构建我的 Angular 应用程序。
  • 所以我引用了此链接 http://blog.teamtreehouse.com/26017-2
  • 我在 package.json 级别创建了一个 webpack.config.js,并在 package.json 中包含了这一行 "bundle": "webpack"
  • 当我运行 npm run bundle 时,我遇到错误 npm ERR!失败于 [email protected]捆绑脚本“webpack”。
  • 你能告诉我如何解决这个问题吗?
  • 在下面提供我的代码和错误

文件夹结构

- webapp
  - app
    - app.module.ts
  - package.json
  -webpack.config.js

app.module.ts

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 {
}

package.json

{
  "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"
  }
}

webpack.config.js

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")
        ]
    };

错误

$ npm run bundle

$ npm 运行包

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f0c0f100d0b0c3f4e514f514f" rel="noreferrer noopener nofollow">[email protected]</a> 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! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6858699848285b6c7d8c6d8c6" rel="noreferrer noopener nofollow">[email protected]</a> bundle: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6b5b6a9b4b2b586f7e8f6e8f6" rel="noreferrer noopener nofollow">[email protected]</a> 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

最佳答案

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

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

至:

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

这应该可行。

关于javascript - 抛出新错误(`弃用通知 : CommonsChunkPlugin now only takes a single argument,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46780772/

相关文章:

php - 多维 JavaScript 数组到 PHP 数组

javascript - 无需刷新页面即可显示img元素

javascript - 将我的 'flipping' 圆圈定位在页面中间

angular - 在 iOS 中动态更改 PWA 应用程序的状态栏颜色

javascript - UserModel 不可分配给文档类型的参数 | nulll [带 typescript 的 Mongoose ]

php - 最佳方法: Parsing CSV file and Passing back to front end using AJAX

Angular 2单元测试: There is no directive with "exportAs"

Angular 2 Quickstart - 我的应用程序组件未加载

css - 在禁用的输入上更改自定义输入范围缩略图背景颜色

reactjs - react typescript : Property 'history' does not exist on type 'PropsInterface'