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

【问题标题】：App bundling failure using webpack-dev-server command使用 webpack-dev-server 命令的应用程序捆绑失败
【发布时间】：2016-09-28 06:54:06
【问题描述】：

我正在尝试使用 webpack 捆绑 Angular 应用程序，

这是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.

或者当我运行与 npm 脚本相同的命令时，日志保持不变（看起来一切正常），但 bundle.js 文件而不是在 /app 文件夹下生成，就像在 @ 中设置的那样987654329@，它是在应用程序根目录下生成的（文件实际上并没有写入磁盘），它只能通过urlhttp://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)）并且在多次重复相同的过程之后，现在我没有在任何地方获得捆绑文件但日志和上面一样。

当我用 package.json 中的 webpack 替换命令 webpack-dev-server 时：

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

现在 bundle.js 存在于 /app 下，它通过 http://127.0.0.1:8080/app/bundle.js 显示，并且 index.html 加载完美，没有错误。

【问题讨论】：

标签： angularjs webpack webpack-dev-server

【解决方案1】：

在配置文件中设置 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'
    }
};

【讨论】：