webpack中的publicPath路径问题（output和DevServer中的publicPath的作用）

在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的路径如下所示

<script type="text/javascript" src="asset/js/main.js"></script>

我们看到的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才是设置的资源打包后的输出路径

webpack中的publicPath路径问题（output和DevServer中的publicPath的作用）

猜你喜欢