关于webpack-dev-server的几个问题

Question

关于webpack-dev-server的几个问题

问题一：webpack-dev-server不能生成文件么?

webpack-dev-server开启后，css和js的修改都实时刷新了，但是都在内存里，只能看看修改的效果，最后要得到修改后的文件，又要关掉webpack-dev-server，再webpack编译一次...觉得很不方便，有办法让实时刷新时同时生成出改动后的文件么？

问题二：webpack-dev-server的端口怎么修改？

webpack-dev-server默认是从localhost：8080启动，假如我需要多个设备打开这个页面，localhost肯定没戏。。我需要把开发服务器地址改为另一个地址，比如路由的地址192.168.1.100：8080,这样局域网内所有设备都可以访问。。。但是我改了下devServer:{host}完全没用。。

问题三：publicPath是什么？

找了一堆资料没看懂。。。全是写CDN，还有什么前后端热替换。。
自己试了下，使用webpack-dev-server时，不加pubicPath会无效。。

有知道麻烦解答下，感谢。。。

Answer 1

1. 开多一个控制台，用webpack --watch实时监控文件变动随时编译就行了。

2. 用--port来制定参数，比如webpack-dev-server --port 8888

3. 要理解publicPath，首先要知道什么时候webpack会用到这个配置参数：在webpack为你自动生成资源路径时，比如说由于webpack异步加载分包而需要独立出来的chunk，或是打包css时，webpack为你替换掉的图片、字体文件，又或是使用html-webpack-plugin后webpack为你自动加载的入口文件，等等，这些webpack生成的路径，都会参考你的publicPath参数。你不需要管什么CDN，你要想的就是，你的文件生成出来以后，是部署到哪里的，如果是跟页面放到一起的，那你尽管可以按相对路径来设置，比如说'./'之类的；而如果你的js、css是打算放CDN的，那当然就要填CDN的域名和路径了。

详细可看我这篇文章《webpack多页应用架构系列（二）：webpack配置常用部分有哪些？》

Answer 2

通常来说我们不会在使用dev-server的时候同时让他生成文件，因为你通常不会在开发的时候就做uglify，还有很多的优化配置也不会用，如果你真的需要，就照楼上说的做。

关于publicPath，我上次回答另一个人问题的时候说过，这里复制过来。
问题链接：https://segmentfault.com/q/10...

一个html文件中会纪录它要载入哪些脚本，然后就会向对应的URI（统一资源标识符）去请求这个资源。
比如你上面的html文件中纪录了请求src为bundle.js的文件，因为你正在访问http://localhost:8080/的地址，那么浏览器会将其解析为http://localhost:8080/bundle.js，而webpack-dev-server在运行的时候就会根据你的配置（具体就是output中的publicPath来决定）将其提供给访问者，而你没有配置的情况下（path是webpack，不是webpack-dev-server用的，用于production build的时候确定生成文件的位置），他就默认是webpack-dev-server当前监听的端口的根目录"/"，于是你就能正常获得这个bundle.js。而在npm run watch的过程中，它是不会生成实际的脚本文件的，都是根据需要提供给访问者。
假如你把webpack-dev-server的output的publicPath定义为"/js/"，那么你就应该去http://localhost:8080/js/bundle.js来获得这个资源。

另外需要关注的就是webpack实际打包文件（不是webpack-dev-server）的时候，output中的publicPath仍然有用。比如你通过react-router做module的按需加载，打个比方吧，你的app分为三个大块，一个是index块，一个是用户中心块，一个是网站功能块，假设他们都很大，各有300K。因为用户首先访问的肯定是index块，你肯定就希望不要打出一个900K的包（实际更大，因为你肯定会引入很多其他的包），而是按需加载。那么给用户中心块和网站功能块做了按需加载之后，他们就会被生成0.js，1.js这样的会被按需加载的模块，在访问到对应路由的时候才会临时从服务器上下载。
此时你在webpack设置中output里的publicPath就会起作用，比如我设置的"/js/"，我网站假设是http://www.test.com/，那么当app需要0.js这个模块的时候，虽然html里面没有写，但是就会自动去http://www.test.com/js/0.js这个uri去获取脚本

Answer 3

问题一，楼上正解，如果非要生成的话，可以考虑使用 write-file-webpack-plugin

Answer 4

楼主说的

改了下devServer:{host}完全没用。。

可以试试加这个属性

devServer: {
   port: 9999,
   disableHostCheck: true
}

这是webpack的新特性。

Answer 5

问下，如果我不想运行时带上端口号，如何配置尼？