2. 重学webpack——webpack5.0之深入了解output的publicPath、htmlWebpackPlugin的publicPath和devServer的publicPath区别

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

2.webpack中各种publicPath的使用

publicPath，顾名思义"公共路径"，其在各项配置中，基本就是作为资源路径前缀使用。即便意思都近似为资源路径前缀，但其实有很大差别。

publicPath的各种场景

1. output中的publicPath与htmlWebpackPlugin中的publicPath

不论是output中的publicPath还是htmlWebpackPlugin中的publicPath，都是给引用资源添加前缀。

比如：js中引用了一个图片，require("./a,png")，那么publicPath配置为abc/，那么打包后就是require("abc/a,png")

const path = require('path');
module.exports = {
    output: {
        path: ptah.resolve(__dirname, 'dist')
        filename: 'main.js',
        publicPath: 'abc/' // 这里配置require("./a,png")，那么js中引用的图片就会打包成require("abc/a,png")
    }
}

const path = require('path');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: path.resolve(__dirname, 'src/index.html'),
          publicPath: 'abc/',
        }),
    ]
}

• 特别注意:
  • 这里添加publicPath，指的是从入口文件开始编译时碰到的引用资源路径会添加publicPath。不是入口文件是不会添加的。比如webpack.config.js中写了entry是index.js，但是在index.html中写了一个<script src="./a.js"></script>，这时候这个script是不会编译的，因为不在编译范围内。
  • 如果同时配置了output和htmlWebpackPlugin的publicPath，那么优先级是htmlWebpackPlugin的高

2.devServer中的publicPath

这个配置其实是蛮有讲头的，他的本意也是路径前缀，但是跟其他publicPath有所区别：

首先，devServer配置起作用需要两个条件：

1. 安装了webpack-dev-server
2. 使用开发环境起服务，脚本一般为webpack serve

有了以上的前缀，现在具体来讲讲这个配置的具体应用：

比如publicPath设置成了/yuhua/，那么意思就是访问服务需要带上公共资源路径/yuhua/，也就是说，不写publicPath，那么访问在http://localhost:8080,如果publicPath为/yuhua/，那么访问就在http://localhost:8080/yuhua/，包括访问打包产物，也是在http://localhost:8080/yuhua/下访问。

const path = require('path');
module.exports = {
    devServer: {
        publicPath: '/yuhua/', // 服务会起在/yuhua/下，比如不写这个publicPath的时候，访问是http://localhost:8080/,那么写了之后就是http://localhost:8080/yuhua就能访问到首页，以及dist打包出来的资源都以后者为路径前缀
        contentBase: path.resolve(__dirname, 'public'), // 额外的静态文件目录内容，所谓的额外的，就是指不会被打包进去的，但是我可以将contentBase作为静态服务器资源目录，其实就相当于景台服务器，浏览器可以直接访问对应目录下的文件
      },
}

如果在output中也设置了publicPath，这其实是不冲突的，比如下面的代码,那么你所有的打包产物的访问地址会有两步处理：

1. 打包出的结果，引用资源都会加上output下的publicPath
2. 起开发服务后，会在服务地址后加上devServer下的publicPath

所以综上所述，

​ 起的开发服务地址是：http://localhost:8080/[devServer下的publicPath]

​ 起的开发服务下打包资源地址是：http://localhost:8080/[devServer下的publicPath]/[output下的publicPath]

const path = require('path');
module.exports = {
    output: {
        path: ptah.resolve(__dirname, 'dist')
        filename: 'main.js',
        publicPath: 'abc/' // 这里配置，那么html中引用的图片<img src="./a,png"/>就会打包成<img src="abc/a.png">
    },
    devServer: {
        publicPath: '/yuhua/', // 服务会起在/yuhua/下，比如不写这个publicPath的时候，访问是http://localhost:8080/,那么写了之后就是http://localhost:8080/yuhua就能访问到首页，以及dist打包出来的资源都以后者为路径前缀
        contentBase: path.resolve(__dirname, 'public'), // 额外的静态文件目录内容，所谓的额外的，就是指不会被打包进去的，但是我可以将contentBase作为静态服务器资源目录，其实就相当于景台服务器，浏览器可以直接访问对应目录下的文件
      },
}

devServer还有一个属性叫做contentBase，这个属性用于额外的静态文件目录内容，所谓的额外的，就是指不会被打包进去的，但是我可以将contentBase作为静态服务器资源目录，其实就相当于景台服务器，浏览器可以直接访问对应目录下的文件。另外，如果找不到dist下（内存中）的静态文件，就会去这个目录下找。

举例说明：

有一个public文件夹下的text.txt，内容为123

同时，contentBase属性的值就是path.resolve(__dirname, 'public')，

那么这时候访问text.txt文件的地址为：http://localhost:8080/test.txt

意思就是我将contentBase对应的目录，所谓我静态资源服务目录，可以直接访问

那么contentBase与publicPath有关系吗？

其实没有什么关系，不论是output的publicPath还是devServer的publicPath,都没关系

const path = require('path');
module.exports = {
    output: {
        path: ptah.resolve(__dirname, 'dist')
        filename: 'main.js',
        publicPath: 'abc/'
    },
    devServer: {
        publicPath: '/yuhua/',
        contentBase: path.resolve(__dirname, 'public'),
      },
}