1.output中的path

output中的path的作用是告知webpack打包的输出目录。比如静态资源的css、js等打包输出到哪里，一般情况下会设置成输出到dist或build文件下。
image.png

2.output中的publicPath

作用：指定index.html文件中打包引用的一个基本路径。

  • pulicPath的默认值是一个空字符串，所以我们打包后引入js文件时，路径是’bundle.js’；

image.png

  • 在开发模式中，我们也将其设置值为 / ,路径就会是’/bundle.js’，那么浏览器会根据所在的域名 + 路径去请求对应的资源；
  • 如果我们希望在本地直接打开html文件来运行（file://xxx）的话，会将其设置为 ./ ，路径是 ‘./bundle.js’，可以根据相对路径去查找资源。
    1. module.exports = {
    2. output: {
    3.   filename: 'bundle.js',
    4.   path: path.resolve(__dirname, './build'), 
    5.   publicPath: './'
    6. }
    7. }

3.devServer中的publicPath

devServer中也有一个publicPath的属性，该属性是指定本地服务所在的文件夹。

  • 它的默认值是 /，也就是我们直接访问端口即可访问其中的资源 http://localhost:8080；
  • 如果我们将其设置为了 /abc，那么我们需要通过 http://localhost:8080/abc才能访问到对应的打包后的资源；
  • 并且这个时候，我们其中的bundle.js通过 http://localhost:8080/bundle.js也是无法访问的。所以必须将output.publicPath也设置为 /abc。

官方其实有提到，建议 devServer.publicPath 与 output.publicPath相同。

4.devServer中的contentBase

devServer中的contentBase对于我们直接访问打包后的资源其实并没有太大的作用，它的主要作用是如果我们打包后的资源，又依赖于其他的一些资源，那么就需要指定从哪里来查找这个内容。

1）举例说明

比如在index.html文件中，我们需要引入一个abc.js文件，这个文件我们存放在public文件中。
Q：那么，在index.html文件中，我们应该如何去引入这个文件呢？
假设代码是这样的：。（×）但是打包后浏览器是无法通过相对路径去找到这个文件夹的。
所以代码应该是这样的：。（√）
但是，我们应该如何让它去查找到这个文件的存在呢？只要设置 contentBase 即可。

2）watchContentBase属性

当然，在devServer中还有一个可以监听contentBase发生变化后重新编译的一个属性：watchContentBase。
目录结构如下：
image.png

图 index.html文件
image.png

图 webpack.config.js文件
image.png