捆绑问题(angular2 + webpack捆绑)

这是我的package.json。 我添加了webpack的依赖关系。我的混乱是否我的denpendencies和脚本正确? 因为,当我做npm开始时,它开始捆绑,并启动浏览器的angular2项目,我有一个问题, 无法得到app.bundle.js ,我已经提供了index.html,下面的webpack.config.js ..

{ "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the documentation, supplemented with testing support", "scripts": { "build": "rimraf dist && webpack --config webpack.config.js --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" }, "peerDependencies": { "uglify-js": "^2.8.0", "webpack": "^1.9 || ^2 || ^2.1.0-beta || ^2.2.0-rc" }, "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", "core-js": "^2.4.1", "glob": "^7.1.1", "ng2-spin-kit": "^1.3.0", "ng2-toastr": "^1.5.1", "reflect-metadata": "^0.1.10", "rxjs": "5.0.1", "systemjs": "0.19.40", "webpack": "^2.2.1", "zone.js": "^0.7.4" }, "devDependencies": { "@types/jasmine": "2.5.36", "@types/node": "^6.0.46", "babel-core": "^6.24.0", "babel-loader": "^6.4.0", "babel-preset-env": "^1.2.1", "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", "webpack-dev-server": "2.4.1", "webpack-merge": "^3.0.0" }, "repository": {} } 

“build”:“rimraf dist && webpack –config webpack.config.js –progress”

webpack.config.js文件是

 var webpack = require('webpack'), glob = require('glob'); module.exports = { entry: { 'myPages': glob.sync('./src/**/*.js'), // here including js files from src folder }, output: { path: './dist', filename: 'app.bundle.js', library: "node_modules", }, target: 'web', module: { loaders: [{ test: /\.node$/, loader: 'node-loader' }, // Javascript: js, jsx { test: /\.jsx?$/, use: 'babel-loader' }, // CSS: scss, css { test: /\.css$/, loader: "style!css" }, // HTML: htm, html { test: /\.html?$/, loader: "file?name=[name].[ext]" } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, }) ] }; 

webpack.config.js提供名为“dist / app.bundle.js”(在dist文件夹内)的捆绑输出文件,但是我在将app.bundle.js文件插入html页面(索引)时遇到了问题。 HTML是

 <!DOCTYPE html> <html> <head> <title>Angular_E&O</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <base href="/E&O"> <link rel="stylesheet" href="styles.css"> <link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" /> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script> </head> <body> <script src="dist/app.bundle.js"></script> <mainapp>content loading..</mainapp> </body> </html> 

index.html被调用

 <script src="dist/app.bundle.js"></script> 

在这个脚本行我得到错误,它不能得到app.bundle.js,即使我检查了path也是正确的

由于我正在webpack捆绑,请帮我解决。

请像这样在根标签之后添加捆绑的js文件

 <mainapp>content loading..</mainapp> <script src="dist/app.bundle.js"></script> 
Interesting Posts