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

发布时间:2024年01月04日

所有与出口相关的配置都集中在 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
  1. 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
  1. 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
文章来源:https://blog.csdn.net/loyd3/article/details/135329873
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。