话不多说先，直接上报错的图，泥马这图我倒是看清了
webpack-dev-server的版本 version >= 4.0.0 配置的选项中取消了 contentBase 配置，取而代之的是 static下的directory属性。
unknown property 'contentBase'说明这个版本的webpack并不能识别contentBase这个属性- 新版本的webpack配置文件
webpack.config.json格式调整了，不支持contentBase，要用static这个属性代替 - 我用的
"webpack": "^5.70.0"
- 我本想引用本地的静态
.json文件，该文件夹与webpack.config.js平级 contentBase是用来指定被访问html页面所在目录的 , 只有在你想要提供静态文件时才需要
export const getMainData = () => {
return (dispatch) => {
fetch("/public/teslaData.json")
}
}
// dev-server 4.0 以前的写法
devServer: {
contentBase: path.join(__dirname, "./dist")
}
// dev-server 4.0 以后的写法
devServer: {
static: {
directory: path.join(__dirname, './dist')
}
}
大佬我本想获取本地的json数据，但是踏酿的报错，I just like
- 按照路径来说，看起来是没错的，但是运行起来之后就一直报错，404
- 后来百度之后一些论坛和博客上说，路径应该是以index.html文件所在的相对路径，这里的index应该是虚拟的index文件
- 使用了html-webpack-plugin，当不指定contentBase的话dev-server的默认根目录是在webpack.config同一级的目录下，也就是说：这里生成的虚拟index.html是在根目录里面的，也就是和webpack.config.js这些配置文件是平级
output中的publicPath
加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。 如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。通俗的说也就是影响资源生文件的引入路径
webpack-dev-server 中配置的 publicPath
webpack-dev-serve会在内存中保存一份打包后的文件，publicPath映射的资源就是内存的根目录或者说是内存中的文件
webpack-dev-serve中的contentBase
告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。通俗的讲就是，contentBase访问的不是内存中的文件，而是我们本地真实存在的
devServer.publicPath优先于devServer.contentBase
总的来说
- output.publicPath :影响资源生成路径和文件的引入路径
- devServer.publicPath ：设置内存中资源的访问地址，当我们修改本地代码时会重新编译，替换掉内存中原来的文件
- devServer.contentBase：设置访问本地资源的目录
参考文献: blog.csdn.net/youlinhuany…
参考文献：blog.csdn.net/qq_41604498…
参考文献：blog.csdn.net/weixin_4245…
结语
前端react QQ群：
788023830----React/Redux - 地下老英雄前端交流QQ群：
249620372----FRONT-END-JS前端（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习
