번들링 관련 문제 (angular2 + webpack 번들)

여기 내 package.json이 있습니다. webpack에 대한 의존성을 추가했습니다. 내 거부와 스크립트가 올바른지 혼란 스러웠습니다. 왜냐하면 내가 npm 시작을 할 때 번들링을 시작하고 브라우저에서 angular2 프로젝트를 시작했기 때문에 거기에 문제가있었습니다. app.bundle.js를 가져올 수 없습니다, 아래의 index.html, webpack.config.js를 제공했습니다. ..번들링 관련 문제 (angular2 + webpack 번들)

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

"구축": "rimraf DIST & & 웹팩 --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는 내부라는 번들 출력 파일 ('DIST/app.bundle.js'을 준다 폴더),하지만 난이 app.bundle.js을 삽입하는 문제가 있었다 HTML 페이지에 파일을 내 index.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은 내가, app.bundle.js을도 얻을 수 없다는 것을,
내가 오류가 발생했습니다이 스크립트 라인
<script src="dist/app.bundle.js"></script>
를 호출 경로가 맞는지 확인했다.

내가 초심자 웹팩 번들에 대한 생각으로,

출처

2017-03-14 sandhiya velayutham

이

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

같은 루트 태그 후 JS 번들 파일을 추가하시기 바랍니다 .. 날 좀 도와주세요

출처

2017-03-30 17:32:48

번들링 관련 문제 (angular2 + webpack 번들)

답변

관련 문제