重构Webpack系列之三 ----出口(output)
一、概念
Webpack可以通过配置output选项,告知程序如何向硬盘写入编译后的文件。注意,即使可以存在多个entry起点,但也只能指定一个output配置。
备注:以下代码均在webpack.config.js文件进行编辑。
在webpack配置中,output属性的最低要求是,将它的值设置为一个对象,然后为将输出的文件名配置一个output.filename:
module.exports = {
output: {
filename: 'bundle.js'
}
}
二、基本用法
- filename选项
此选项决定了输出的bundle的名称。这些bundle将写入到output.path选项指定的目录下:
module.exports = {
output: {
filename: 'filename.js'
}
}
- path选项
此选项可以设置bundle的输出目录,配置path选项时,注意需填入绝对路径:
module.exports = {
output: {
filename: 'bundle.js',
// 写入到硬盘./src/dist/bundle.js
path: path.resolve(__dirname, '/src/dist')
}
}
- publicPath选项
path是指定打包的”储存“路径,publicPath是指定包的”访问“路径。webpack进行打包的时候会把publicPath指定的路径添加到静态资源路径前面。publicPath 并不会对生成文件的路径造成影响,主要是对你的页面里面引入的资源的路径做对应的补全,常见的就是css文件里面引入的图片。
module.exports = {
output: {
path: path.resolve(__dirname, '/src/dist'),
publicPath: '/src/dist'
}
}
webpack-dev-server也会默认从publicPath为基准,使用它来决定在哪个目录下启用服务。但devServer的配置里面也有一个devServer.static.publicPath,这个选项的作用是告诉服务器在哪个URL上提供静态资源的内容。我们需要做好区分。
- clean选项
在生成文件之前是否选择清空output目录,可以是布尔值也可以是对象,对象还可以配置一些其他参数。
module.exports = {
output: {
clean: true
}
}
- library
为你的入口做导出,输出为一个库,通常用来打包第三方资源包或者其他vendor。
module.exports = {
// …
entry: './src/index.js',
output: {
library: 'MyLibrary',
},
};
三、多个入口输出
在我们使用 webpack 来打包我们的模块化后的应用程序时,webpack 会生成一个可部署的 /dist 目录,然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上,client(通常是浏览器)就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的,这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快,然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。由于缓存的存在,当你需要获取新的代码时,就会显得很棘手。
也就是说,我们想要更新代码时,就要让相对应打包后的文件保持改变,通常是通过修改文件名来告知webpack哪个文件改变了。
如果配置中创建出多于一个“chunk”(例如使用多个入口起点、代码拆分(code splitting)或使用像CommonsChunkPlugin这样的插件)创建多个bundle,则应该使用占位符来确保每个文件具有唯一的名称。
- 使用入口名称
module.exports = {
output: {
filename: '[name].bundle.js'
}
}
- 使用内部chunk id
module.exports = {
output: {
filename: '[id].bundle.j'
}
}
- 使用由生成的内容产生的hash
module.exports = {
output: {
filename: '[contenthash].bundle.js'
}
}
- 结合多个替换组合使用
module.exports = {
output: {
filename: '[name].[contenthash].bundle.js'
}
}
- 使用函数返回filename
module.exports = {
output: {
filename: (pathData) => {
return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js'
}
}
}
注意,此选项不会影响那些按需加载chunk的输出文件。它只影响最初加载的输出文件。对于按需加载的chunk文件,请使用output.chunkFilename选项来控制输出。通过loader创建的文件也不受影响。
四、配置CDN实例
以下是对资源使用 CDN 和 hash 的复杂示例:
module.exports = {
//...
output: {
path: '/home/proj/cdn/assets/[fullhash]',
publicPath: 'https://cdn.example.com/assets/[fullhash]/',
},
};
这里官方说明的也马马虎虎的,待之后实验过后为大家分享就麻烦各位看官点点赞吧!多多支持前端菜鸟