webpack中的path、publicPath、contentBase的区分

output.publicPath & devServer.publicPath

output里面的publicPath表示的是打包生成的index.html文件里面引用资源的前缀；
devServer里面的publicPath表示的是打包生成的静态文件所在的位置（若是devServer里面的publicPath没有设置，则会认为是output里面设置的publicPath的值）；

两个publicPath可以看作是devServer对生成目录dist设置的虚拟目录，devServer首先从devServer.publicPath中取值，如果它没有设置，就取output.publicPath的值作为虚拟目录，如果它也没有设置，就取默认值 “/”。

output.publicPath，不仅可以影响虚拟目录的取值，也影响利用html-webpack-plugin插件生成的index.html中引用的js、css、img等资源的引用路径。会自动在资源路径前面追加设置的output.publicPath。

示例

基本目录

在这里插入图片描述

配置

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: {
		app: './src/app.js'
	},
	output: {
		path: path.join(__dirname, "dist"),
		filename: "[name].js",
		libraryTarget: "umd",
		publicPath: '/asset/'
	},
	resolve: {
		extensions: ['.js', '.vue', '.json']
	},
	externals: {
		tools: "tools"
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: 'vue-loader',
				
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: 'hello world',
			template: './src/index.html',
			filename: 'index.html'
		})
	],
	devServer: {
		host: 'test.m.iqiyi.com',
		port: '9393'
	}
};

通过访问 http://test.m.iqiyi.com:9393/，我们发现无法访问到页面，只是显示出了目录
在这里插入图片描述

如果我们访问http://test.m.iqiyi.com:9393/asset/，可以正常访问到页面
在这里插入图片描述

通过上面两个图片的对比，能得出output.publicPath影响着devServer的虚拟目录的设置。同时内部引用的js路径也被修改为output.publicPath

如果我们修改配置：

devServer {
	publicPath: "test"
}

访问 http://test.m.iqiyi.com:9393/test/，如下图所示：
在这里插入图片描述

我们会发现，虚拟目录优先取devServer中的publicPath，index.html中的js路径仍然取的output.publicPath，但是由于两者值不一样，所以server找不到 /asset/的虚拟目录。

contentBase

devServer里面的contentBase表示的是告诉服务器从哪里提供内容。（也就是服务器启动的根目录，默认为当前执行目录，一般不需要设置）

path

output里面的path表示的是output目录对应的一个绝对路径

html-webpack-plugin

这个插件用于将css和js添加到html模版中，其中template和filename会受到路径的影响，从源码中可以看出
template作用：用于定义模版文件的路径
源码：

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

复制代码因此template只有定义在webpack的context下才会被识别，webpack context的默认值为process.cwd()，既运行 node 命令时所在的文件夹的绝对路径

filename作用：输出的HTML文件名，默认为index.html，可以直接配置带有子目录
源码：

this.options.filename = path.relative(compiler.options.output.path, filename);

复制代码所以filename的路径是相对于output.path的，而在webpack-dev-server中，则是相对于webpack-dev-server配置的publicPath。

如果webpack-dev-server的publicPath和output.publicPath不一致，在使用html-webpack-plugin可能会导致引用静态资源失败，因为在devServer中仍然以output.publicPath引用静态资源，和webpack-dev-server的提供的资源访问路径不一致，从而无法正常访问。

有一种情况除外，就是output.publicPath是相对路径，这时候可以访问本地资源

所以一般情况下都要保证devServer中的publicPath与output.publicPath保持一致。

参考文章：
https://juejin.im/post/5bb085dd6fb9a05cd24da5cf
https://juejin.im/post/5ae9ae5e518825672f19b094