2016-09-28 1 views
0

Я пытаюсь связать угловое приложение с помощью Webpack,App сбой комплектации с помощью команды WebPack-DEV-сервер

Это webpack.config.js:

var path = require('path'); 

module.exports = { 
    context: path.resolve(__dirname, 'app'), 
    entry:'./index.js', 
    output:{ 
     path : __dirname + '/app', 
     filename:'bundle.js' 
    } 
}; 

app/index.html выглядит следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
    <title>test ng-webpack egghead</title> 
</head> 
<body ng-app="app"> 

<script type="text/javascript" src="bundle.js"></script> 

</body> 
</html> 

, когда я запускаю команду webpack-dev-server, как показано в журнале консоли:

>webpack-dev-server --content-base app 
http://localhost:8080/webpack-dev-server/ 
webpack result is served from/
content is served from F:\Learnings\FrontEnd\AngularJs\webpack\egghead.io - AngularJS - Angular and Webpack for Modular Applications\egg-ng-webpack\app 
Hash: 98db763b035ecfaba293 
Version: webpack 1.13.2 
Time: 1089ms 
    Asset  Size Chunks    Chunk Names 
bundle.js 1.22 MB  0 [emitted] main 
chunk {0} bundle.js (main) 1.19 MB [rendered] 
    [0] ./app/index.js 120 bytes {0} [built] 
    [1] ./~/angular/index.js 48 bytes {0} [built] 
    [2] ./~/angular/angular.js 1.19 MB {0} [built] 
webpack: bundle is now VALID. 

или когда я запустить эту же команду, как сценарий НПМ, журнал остаются теми же (это выглядит как и все ли в порядке), но bundle.js файл вместо того, чтобы создавать в папке /app, как указано в обоих output.path, это как это было создано в корне приложения (файл на самом деле не написан на диске), и он будет доступен только через url http://127.0.0.1:8080/bundle.js вместо из http://127.0.0.1:8080/app/bundle.js, как и предполагалось (тогда при попытке загрузить приложение/index.html в браузере Я получаю ошибку (GET http://127.0.0.1:8080/app/bundle.js 404 (Not Found)), и после повторения одного и того же процесса много раз, теперь я не получаю файл связки в любом месте, но журнал остается таким же, как указано выше.

Когда я заменил команду WebPack-DEV-сервер только с WebPack внутри package.json:

"scripts": { 
    "start": "webpack --content-base app" 
    }, 

теперь bundle.js существует под /app, и это прекрасно, показанной через http://127.0.0.1:8080/app/bundle.js и в index.html нагрузки без ошибок ,

ответ

0

установка свойства publicPath в конфигурационном файле действительно решить эту проблему:

var path = require('path'); 

module.exports = { 
    context: path.resolve(__dirname, 'app'), 
    entry:'./index.js', 
    output:{ 
     path : path.resolve(__dirname, 'app'), 
     publicPath: "app/", 
     filename:'./bundle.js' 
    } 
};