output的publicpath和devServer的publicpath有什么关系

Question

有一种情况，一直想不明白，就是output的publicpath和devServer的publicpath不一致的时候，为什么会引用不到相关的静态资源呢？

截取部分webpack.config.js配置：

output:{
    path: path.resolve(__dirname,'../dist'),
    filename: '[name].js',
    publicPath: 'http://localhost:1207/static/'
},
devServer: {
    contentBase: path.resolve(__dirname,'../dist') ,
    host: 'localhost',
    port: 1207,
    publicPath: 'http://localhost:1207/web/'
},

上面这种情况，output的publicpath和devServer的publicpath不一致，index.html中引用不了相关静态资源，我说一下我的理解和疑惑：

我的理解：

devServer启动后，相当于在内存中开启了一个node服务器，静态资源的访问入口是devServer配置的publicpath（http://localhost:1207/web/），但是由于output配置的publicpath是http://localhost:1207/static/，所以index.html引用的静态资源路径就是http://localhost:1207/static/xxx.js而不是http://localhost:1207/web/xxx.js，所以报错

我的疑惑：

1. output和devServer的publicpath不一致，为什么会访问不到output的publicpath（http://localhost:1207/static/）下的静态资源？output的publicpath是绝对路径为什么访问不了？
2. devServer构建编译打包，output和devServer之间的publicpath有什么关系？

Answer 1

理解这段话你应该就知道原因了

webpack-dev-server输出的文件只存在于内存中,不输出真实的文件

Answer 2

我刚总结的，希望对你有帮助
https://www.jianshu.com/p/cbe...

Answer 3

我也碰到类似的疑惑，我的理解是这样

1. output里的publicPath，正常情况下是不需要的，只有当要上线的时候给你的资源配置统一前缀，代表客户端所访问的上线资源地址
2. devServer里的publicPath，是指运行在内存中的代码地址，也可以说是打包生成的文件所在的位置
3. 当然自己测试可能会写一些极端例子，比如devServer也配置了publicPath并且地址还不一致，这种情况可以将devServer比作模拟访问上线地址，output中资源配置的路径已经确定和你访问静态文件路径不一致，这个时候当然一些资源会加载不出来
4. static是不被webpack打包的，所以访问的时候一些图片加载不出来

解决办法是

• 将devServer和output中的publicPath写成同一个名字
• contentBase指向src或者build

devServer: {
  contentBase: './build',
  publicPath: '/build',
},
output: {
  path: path.resolve(__dirname, './build'),
}

大概就是这个意思，希望对你有帮助