使用webpack-dev-server命令的应用程序捆绑失败

Question

I'm trying to bundle an angular application using webpack, 我正在尝试使用webpack捆绑一个角度应用程序，

This is the webpack.config.js : 这是webpack.config.js ：

var path = require('path');

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

the app/index.html looks like this : 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>

when i run webpack-dev-server command like shown in the console log : 当我运行控制台日志中所示的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.

or when i run that same command as an npm script, the log remain the same (it looks as everything is allright) but the bundle.js file instead of being generated under the /app folder as set in both the output.path , it's as generated under the app root(the file isn't written in the disk actually) and it will be available only via the url http://127.0.0.1:8080/bundle.js instead of http://127.0.0.1:8080/app/bundle.js as supposed to be (then when trying to load app/index.html in the brower i get the error ( GET http://127.0.0.1:8080/app/bundle.js 404 (Not Found) ) and after repeating the same process many times, now i'm not getting the bundle file anywhere but the log remains the same as above. 或者当我运行相同的命令作为NPM脚本，日志保持不变（它看起来一切都还好吧），但bundle.js文件的下产生，而不是/app在这两个文件夹设置output.path ，这是（在应用程序根目录下生成）（该文件实际上未写入磁盘），并且只能通过URL http://127.0.0.1:8080/bundle.js而不是http://127.0.0.1:8080/app/bundle.js应该是（然后尝试在浏览器中加载app / index.html时出现错误（ GET http://127.0.0.1:8080/app/bundle.js 404 (Not Found) ），并重复多次相同的过程后，现在我没有在任何地方获取捆绑文件，但日志与上面相同。

When i replaced the command webpack-dev-server with just webpack inside the package.json : 当我用package.json内的webpack替换命令webpack-dev-server时：

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

now the bundle.js exists under /app and it's shown via http://127.0.0.1:8080/app/bundle.js and the index.html loads perfectly without errors. 现在bundle.js位于/app并通过http://127.0.0.1:8080/app/bundle.js显示，并且index.html完美加载而没有错误。

Answer 1

setting the publicPath property in the config file did solve the problem : 在配置文件中设置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'
    }
};

使用webpack-dev-server命令的应用程序捆绑失败

问题描述

1 个解决方案

解决方案1
0 2016-09-28 07:44:29

使用webpack-dev-server命令的应用程序捆绑失败

问题描述

1 个解决方案

解决方案1 0 2016-09-28 07:44:29

解决方案1
0 2016-09-28 07:44:29