Question

我尝试使用webpack捆绑角度应用程序，

这是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文件夹下生成在应用程序根目录下生成的output.path，它都是（文件实际上没有写入磁盘），只能通过网址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)）并且在多次重复相同的过程之后，现在我正在使用没有在任何地方获取捆绑文件，但日志保持与上面相同。

当我用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完美无误地加载。

Answer 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'
    }
};

使用webpack-dev-server命令

1 个答案: