webpack之输出(Output)

ゞ浴缸里的玫瑰 2021-09-14 04:58 447阅读 0赞

将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 `output` 属性描述了如何处理归拢在一起的代码(bundled code)。

输出(Output):配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

# 一.用法 #

a.filename 用于输出文件的文件名。b.目标输出目录 path 的绝对路径。

webpack.config.js: const config = { output: { filename: 'bundle.js', path: '/home/proj/public/assets' } }; module.exports = config;

此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。

#    二.多个入口起点 #

如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

webpack.config.js: const config = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } };

// 写入到硬盘：./dist/app.js, ./dist/search.js

# 三.高级进阶 #

以下是使用 CDN 和资源 hash 的复杂示例：

config.js: output: { path: "/home/proj/cdn/assets/[hash]", publicPath: "http://cdn.example.com/assets/[hash]/" }

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 \_\_webpack\_public\_path\_\_。  
  
\_\_webpack\_public\_path\_\_ = myRuntimePublicPath  
  
// 剩余的应用程序入口

# 四.output属性“path” Vs “publicPath” #

output告诉Webpack应该在哪里以怎样的方式去放置打包好的文件。它有两个属性：“path”和“publicPath”。

“path”会简单地告诉Webpack生成文件输出位置。“publicPath”多被一些Webpack的插件使用，在HTML文件以生产环境方式被构建的时候，更新CSS文件内的URL地址。

![20170908142213900][]  
  
  
举个栗子，在你的CSS文件里面，你可能会在URL里面加载./test.png。但是在生产环境中，test.png很可能放在CDN内——比如当你的node.js服务器运行在Heroku的时候。这意味着，你可能在生产环境内不得不手动更新文件内的URL指向。  
  
相反，你可以使用Webpack的publicPath以及其他适用于这个属性的插件在生产环境中自动地更新文件内部的URL指向。

![20170908142244601][]

[20170908142213900]: /images/20210813/c72a1b7af11444d3a8ab79a8e99aa8a2.png
[20170908142244601]: /images/20210813/661d1bc588154d648989bccb81bf0154.png