【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
  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

相关推荐

  1. Webpack资源输入输出 - 配置资源出口

    2024-01-05 10:08:21       52 阅读
  2. Webpack】处理样式资源

    2024-01-05 10:08:21       59 阅读
  3. Webpack】处理 js 资源

    2024-01-05 10:08:21       54 阅读
  4. Webpack】处理图片资源

    2024-01-05 10:08:21       49 阅读
  5. webpack5基础--05_处理图片资源

    2024-01-05 10:08:21       40 阅读
  6. webpack5基础--11_处理 Html 资源

    2024-01-05 10:08:21       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-05 10:08:21       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-05 10:08:21       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-05 10:08:21       87 阅读
  4. Python语言-面向对象

    2024-01-05 10:08:21       96 阅读

热门阅读

  1. vue-cli使用环境配置文件env

    2024-01-05 10:08:21       51 阅读
  2. 关于JVM对象创建的小知识

    2024-01-05 10:08:21       57 阅读
  3. MySQL中NULL值与空值的坑

    2024-01-05 10:08:21       54 阅读
  4. c++ 基础 笔记

    2024-01-05 10:08:21       56 阅读
  5. git使用 笔记2

    2024-01-05 10:08:21       49 阅读
  6. C 练习实例15

    2024-01-05 10:08:21       64 阅读
  7. LeetCode //C - 2390. Removing Stars From a String

    2024-01-05 10:08:21       62 阅读
  8. C 练习实例12

    2024-01-05 10:08:21       58 阅读
  9. Golang leetcode160相交链表 map 双指针迭代

    2024-01-05 10:08:21       54 阅读