所有与出口相关的配置都集中在 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种形式:
//假设当前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
//假设当前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
//假设当前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