webpack-bundle-js-not-found的解决方法

webpack配合react的方法本文不再赘述，可以参见下面这个文章
http://jansoren.github.io/react-webpack-tutorial/
2016-11-21亲测有效
说说webpack-bundle-js-not-found的问题，通过上文的方法，实现了webpack的打包，于是尝试想webpack-dev-server来监听文件变化，自动编译，结果踩坑了。这个自动编译是把文件输出到内存的，不是输出到文件，但是html中引用到bundle.js是之前webpack生成的，所以你改js之后，页面并不会变化。在你删除磁盘的bundle.js之后，开启webpack-dev-server再访问页面就会报如本文标题的错误。
参见github的讨论

Paste_Image.png

以及官方说明

Paste_Image.png

参考链接最下方，如上图。
http://webpack.github.io/docs/tutorials/getting-started/
可以很明确的看出，webpack-dev-server会把请求转向内存中的文件。
这时候以我的目录为例，访问路径
http://localhost:8080/dist/

Paste_Image.png

index.html中请求的是dist目录下的bundle.js文件，自然之前我们写的直接访问bundle.js会找不到文件。
因为这时候bundle.js文件应该通过 http://localhost:8080/bundle.js 来访问的，试一下，果然没错。

Paste_Image.png

在我不想修改html中引用的路径的时候，如何去解决调试的问题呢？
很简单，修改路径，让webpack-dev-server把bundle.js生成到dist的虚拟路径去就行了，如何设置呢？查询官网可知，如下图

Paste_Image.png

截图参考网址：
http://webpack.github.io/docs/webpack-dev-server.html#additional-configuration-options
我们修改为 publicPath: "/dist/",即可

Paste_Image.png

删掉磁盘上dist文件夹下的bundle.js，启动webpack-dev-server再试试，大功告成。此时修改js，页面就会发生变化了。