2017-03-15 6 views
1

Ich bin neu in angular2 und webpack zu implementieren, ich habe webpack installiert haben und die Größe der Datei mit webpack zu minimieren, ist hier die webpack.config.js im Stammordner platziertUnable webpack in angular2

var HtmlWebpackPlugin = require('html-webpack-plugin'); 


module.exports = { 
    entry: { 
    app: './src/main.ts' 
}, 
    output: { 
    filename: 'bundle.js' 
}, 
    module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     loaders: [ 
      { 
      loader: 'awesome-typescript-loader', 
      options: { configFileName: helpers.root('src', 'tsconfig.json') } 
      } , 'angular2-template-loader' 
     ] 
     }  
    ] 
    }, 
plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }) 
    ] 
}; 

und hier ist meine package.json Datei auch im Stammordner platziert

{ 
    "name": "angular-quickstart", 
    "version": "1.0.0", 
    "description": "QuickStart package.json from the documentation, supplemented with testing support", 
    "scripts": { 
    "build": "webpack --progress", 
    "build:watch": "tsc -p src/ -w", 
    "build:e2e": "tsc -p e2e/", 
    "serve": "lite-server -c=bs-config.json", 
    "serve:e2e": "lite-server -c=bs-config.e2e.json", 
    "prestart": "npm run build", 
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
    "pree2e": "npm run build:e2e", 
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 
    "preprotractor": "webdriver-manager update", 
    "protractor": "protractor protractor.config.js", 
    "pretest": "npm run build", 
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
    "pretest:once": "npm run build", 
    "test:once": "karma start karma.conf.js --single-run", 
    "lint": "tslint ./src/**/*.ts -t verbose" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "MIT", 
    "dependencies": { 
    "@angular/common": "~2.4.0", 
    "@angular/compiler": "~2.4.0", 
    "@angular/core": "~2.4.0", 
    "@angular/forms": "~2.4.0", 
    "@angular/http": "~2.4.0", 
    "@angular/platform-browser": "~2.4.0", 
    "@angular/platform-browser-dynamic": "~2.4.0", 
    "@angular/router": "~3.4.0", 
    "angular-in-memory-web-api": "~0.2.4", 
    "systemjs": "0.19.40", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.1", 
    "zone.js": "^0.7.4" 
    }, 
    "devDependencies": { 
    "@types/jasmine": "2.5.36", 
    "@types/node": "^6.0.46", 
    "awesome-typescript-loader": "^3.1.2", 
    "canonical-path": "0.0.2", 
    "concurrently": "^3.2.0", 
    "jasmine-core": "~2.4.1", 
    "karma": "^1.3.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "lite-server": "^2.2.2", 
    "lodash": "^4.16.4", 
    "protractor": "~4.0.14", 
    "rimraf": "^2.5.4", 
    "tslint": "^3.15.1", 
    "typescript": "~2.0.10", 
    "webpack": "^2.2.1" 
    }, 
    "repository": {} 
} 

entsprechend der Dokumentation alles, was wir tun müssen, ist das Kommando im Script pro enthalten perty des package.json den Befehl auszuführen, so habe ich das Skript Eigenschaft wie dieses

"scripts": { 
    "build": "webpack --progress", 
--- 
-- 
} 

so enthalten, dass, wenn ich den Befehl wie dieses npm laufen bauen laufen sollte das Projekt erstellen von der Start Datei main.ts rekursiv und geben Sie mir eine Ausgabe wie in der webpack.config.js erwähnt, aber ich bekomme einen Fehler wie diese enter image description here nicht sicher, was schief läuft, wenn jemand mir zumindest mit einem geeigneten Dokumentationsmaterial würde von großer Hilfe sein, ich verweise this Dokumentation und es ist keine Hilfe, danke

Antwort

1

Ihre Frage Ihre npm und node.js werden Upgrade könnte

Hier ist ein guter Start für Winkel 2 Anwendung webpack mit Es hat eine große Unterstützung für aot, Baum schütteln, Produktionsserver und Entwicklungsserver Here you go