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，因为这次内存溢出发现了真实的原因，也是可喜可贺。

参考博客

• https://blog.csdn.net/fengmin_w/article/details/81984514
• https://blog.csdn.net/lhjuejiang/article/details/80243975