在webpack的配置文件中，output和devServer中都可以设置一个publicPath属性，那么两者的作用有什么不同呢？嗯、稍微的分析一下
1、publicPath在output属性里面，设置的其实是一个基础的路径，它会为我们所有的资源都应用上publicPath设置的值，然后再接上资源对应转换出来的路径，怎么理解呢，看一下例子就知道了
我们在配置文件中设置了一下的值
output:{ path:path.resolve(__dirname,'dist/asset'), filename:'js/main.js', publicPath: "asset/" }然后我们执行npm run dev进行打包处理，然后看一下，我们index.html中引入的main.js的路径如下所示
我们看到的asset/就是我们在output中设置的值，然后打包之后，它就会加在了js输出的路径上面，成为main.js的基础路径,当然这样使用有可能是会挂掉的，我这里只是举一个小小的例子，真正用的时候还是要视情而定
2、devServer中的publicPath
先稍微介绍一下devServer：当你启动DevServer时，资源还是会打包，但它打包资源之后，这些资源不会放到我们的本地目录里面，而是会放到内存里面，所以我们的DevServer是会到内存里面去查找我们打包好的内容，除了去内存中查找内容以外，它还会到本地目录中查找内容，那devServer中有一个contentBase属性可以控制它去哪里访问本地目录的资源
contentBase默认是当前的工作目录，当它查不到打包在内存中的资源的时候，它就会到contentBase中去找
OK、进入正题：devServer中也有一个publicPath值，它是服务器所打包资源后的输出路径
如果我们没有给它这个值，它就会去拼凑output中publicPath中的值，但如果在DevServer中设置了publicPath，那它就不会去管output中publicPath设置的值了
看例子：在devServer中我们没有设置publicPath,然后output中还是上面例子中的设置，那么此时我们看当我们运行服务器的时候，命令行中会有这样的一句代码
webpack output is served from /asset/注意这里的/asset是output中设置的publicPath的值，后面的“/”，devServer的默认值（当我们没有给它设置值的时候，它的默认值就是“/”）
那，如果我们为devServer中的publicPath设置了值，看例子
output:{ path:path.resolve(__dirname,'dist/asset'), filename:'js/main.js', publicPath: "asset/" }, devServer: { contentBase: './dist', publicPath:"/" }运行服务器的时候，命令行输出的代码是这样的
webpack output is served from /说了这么多，其实就是为了理解publicPath的不同作用，实际的应用中，我们更倾向于将output和devServer中的publicPath都设置为“/”
那总结一下：output中的publicPath是资源打包的基础路径，output中的path才是设置的资源打包后的输出路径
devServer中的publicPath设置的是资源会被打包到哪里
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/208190.html原文链接：https://javaforall.net
