【Webpack】资源输入输出 - 配置资源出口

所有与出口相关的配置都集中在 output对象里
output对象里可以包含数十个配置项，这里介绍几个常用的

filename
顾名思义，filename的作用是控制输出资源的文件名，其形式为字符串，如：

module.exports = {
	entry: './src/app.js',
	output: {
		filename: 'bundle.js'
	}
}

filename可以不仅仅是bundle的名字，还可以是一个相对路径，即便路径中的目录不存在也没关系，Webpack 会在输出资源时创建该目录。

在多入口的场景中，我们需要为对应产生的每个bundle指定不同的名字，Webpack支持使用一种类似模板语言的形式动态地生成文件名

module.exports = {
	entry: {
		app: './src/app.js',
		vendor: './src/vendor.js'
	}
	output: {
		filename: '[name].js'
	}
}

在资源输出时，上面配置的filename中的[name]会被换为chunk name，因此最后项目中实际生成的资源是vendor.js与app.js

一般在项目中是这样配置的

filename:'[name]@[chunkhash].js'

tips:
更新缓存一般只用在生产环境的配置下，在开发环境中可以不必配置[chunkhash].

path
path 可以指定资源输出的位置，要求值必须为绝对路径。

const path = require('path');
module.exports = {
	entry: './src/app.js',
	output: {
		filename: 'bundle.js',
		path: path.join(__dirname, 'dist'),
	}
}

上述配置将资源输出位置设置为工程的 dist 目录。在 Webpack4之后，output.path已经默认为 dist 目录，除非我们需要更改它，否则不必单独配置。

publicPath
publicPath 是用来指定资源的请求位置。请求位置指的是由JS或CSS所请求的间接资源路径。
publicPath有3种形式：

1. HTML，也就是说我们可以将publicPath 指定为HTML的相对路径，在请求这些资源时会以当前页面HTML所在路径加上相对路径，构成实际请求的 URL。

//假设当前HTM地址为 https;//example.com/app/index.html
//异步加载的资源名为 0.chunk.js
publicPath:"" // 实际路径https://example.com/app/0.chunk.js
publicPath:"./js" // 实际路径https://example.com/app/js/0.chunk.js
publicPath: "../assets/" // 实际路径https://example.com/aseets/0.chunk.js

2. Host相关
   若publicPath的值以“/”开始，则代表此时publicPath是以当前页面的 host name为基础路径的。

//假设当前HTM地址为 https;//example.com/app/index.html
//异步加载的资源名为 0.chunk.js
publicPath:"/" // 实际路径https://example.com/app/0.chunk.js
publicPath:"/js/" // 实际路径https://example.com/app/js/0.chunk.js
publicPath: "/dist/" // 实际路径https://example.com/dist/0.chunk.js

3. CDN相关
   上面两种配置都是相对路径，我们也可以使用绝对路径的形式配置 publicPath。这种情况一般发生于静态资源放在CDN上面时，由于其域名与当前页面域名不一致，需要以绝对路径的形式进行指定。当publicPath 以协议头或相对协议的形式开始时，代表当前路径是CDN相关。

//假设当前HTM地址为 https://example.com/app/index.html
//异步加载的资源名为 0.chunk.js
publicPath:"http://cdn.com/" // 实际路径径http://cdn.com/0.chunk.js
publicPath:"https://cdn.com/" // 实际路径https://cdn.com/0.chunk.js
publicPath:"//cdn.com/assets/" // 实际路径 //cdn.com/assets/0.chunk.js