webpack-dev-server配置翻车记录

在配置WebpackDevServer后,在开发的过程中,经常出现莫名其妙的内存溢出,最后经过多方排查,发现问题出在webpack的配置文件上。

错误的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//旧配置文件,现作废,原因见下面描述
devServer: {
//基础目录(可选)
//contentBase: './',
//如果需要被外部访问
host: "0.0.0.0",
port: 8989,
//只显示错误提示
stats: "errors-only",
//静态资源路径
publicPath: "/dist/",
//在devServer启动之前执行的方法
after: () => {
console.log('Server Start!');
},
//将默认 /dist/ 路径代理为 / 路径
proxy: {
'/': 'http://0.0.0.0:8989/dist/'
}
}

正确的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//正确配置文件
devServer: {
//如果需要被外部访问
host: "0.0.0.0",
port: 8989,
//只显示错误提示
stats: "errors-only",
//devserver资源路径,默认"/"
//提示,如果没有配置这里的publicPath,但是配置了output.publicPath
//这里的publicPath会默认为output.publicPath中配置的,而不是"/"
publicPath: "/",
//在devServer启动之前执行的方法
after: () => {
console.log('Server Start!');
}
}

乱用proxy代理会产生递归查找的bug
如果页面调用了一个不存在的资源,就会出现路径fe/dist/dist/dist/dist/dist/dist/bg2.png
这里的dist会无限延伸下去,直到爆内存。
MemoryFS库会因为读取了一个超大的string导致1.4G默认内存被占满,devserver因此而崩溃。这就是因为使用了错误的代理导致的。

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
- publicPath: '/dist/',
filename: 'js/app.js'
}
};
//将默认 /dist/ 路径代理为 / 路径
- proxy: {
- '/': 'http://0.0.0.0:8989/dist/'
- }

问题原因

解决这个问题其实也很简单,就是搞清楚webpack这几个路径究竟是什么意思。
在网上查到的很多资料,大多语焉不详,很难说清楚具体的区别。有的说的过于高深又很难理解。
如果这几个路径配置有问题,就会出现无法访问静态资源,页面无法加载等问题。

  • output.publicPath
    会在所有loader生成的路径前,加入一个前缀
    如果publicPath: /dist/
    那么所有loader生成的路径前会变成,/dist/res/a.jpg

  • devServer.publicPath
    默认为"/",但是如果output.publicPath配置了路径,那么会使用output.publicPath中的路径。
    提示:这里面的前提是,devServer.publicPath不去配置,使用默认值的情况。
    如果你配置了默认值,devServer回去选择只用你在devServer下面配置的这个路径。
    这句话是在webpack官网中output部分,而不是在devserver部分。 因为这个说明绕了很大的弯路。

  • contentBase
    指定静态服务器的根目录,可以访问到不通过webpack处理的文件。

感想

经过这趟折腾,虽然绕了一圈回到了起点,发现起点的内容就是正确的。
本意是想让devserver默认/路径即可访问资源,而不是使用url/dist/访问。实际上导致这个问题的,是output里的publicPath。
绕了好大的一个圈,终于绕明白了,也让我了解到,这几个参数的具体含义,在这里也要感谢这位博主,把这几个路径说的十分明白。
至于之前在网络上为什么没有搜到,将/dist/ 切换到/ 作为默认根路径的做法。答案就很简单了,因为,本来默认就是/作为根路径。只是我设置错了,才导致的这个错误,那么再改回去就好了,自然也就很难搜索到结果了。
这里也是多亏了观察,删掉devserver路径之后,观察了下network,发现index被找到了,那么资源文件没找到的原因,就容易定位了。
从2月17日埋藏下的隐形bug,因为这次内存溢出发现了真实的原因,也是可喜可贺。

参考博客

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×