1. 输出路径与文件名：决定产物存放与缓存的第一要点
在 Webpack 的打包流程中，输出路径负责决定最终产物在磁盘上的存放位置，直接关系到部署策略和服务器文件结构。合理的输出路径可以实现不同版本并行上线、方便回滚以及与持续集成的对接。通过模式化的目录设计，我们可以将库、应用与静态资源分离，提升部署的灵活性与可维护性。输出路径的配置也是后续静态资源 CDN 部署的基础。
输出文件名通常与内容、入口和构建阶段相关联，用来实现长期缓存和版本控制。通过 [name]、[contenthash]、[chunkhash] 等占位符，可以在源码未变时复用缓存，在更新时触发新版本的加载，从而显著降低用户端的缓存失效次数。
下面给出一个基础示例，展示如何在 output 中同时指定路径、文件名和公开路径（publicPath）：
const path = require('path');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'), // 输出路径，产物存放的位置filename: '[name].[contenthash].js', // 输出文件名，便于缓存publicPath: '/static/', // 静态资源的加载前缀assetModuleFilename: 'assets/[hash][ext][query]' // 资源文件的命名}
}contenthash 是实现长期缓存的关键，只有源代码有变化时才会更新文件名，从而确保浏览器命中缓存。另一方面，publicPath 影响到浏览器在页面中加载脚本的 URL，正确设置可实现 CDN 加速和跨域加载。
2. libraryTarget：从输出到库导出的全景解读
当你的打包产物不仅用于网页直接执行，还需要作为一个可被其他项目引用的库时，libraryTarget 就成为核心选项，决定了对外暴露库的方式。常见的模式包括 var、commonjs2、umd、module 等，每种模式都对应不同的运行环境和导入方式。正确的选择可以让你的库在浏览器、Node、甚至打包成 NPM 包时保持兼容性。
除了 libraryTarget，library 与 libraryExport 也很重要，用于指定全局变量名以及暴露给外部的具体导出项。对于复杂的库，umd 可以在浏览器全局、CommonJS、以及 AMD 之间自动适配，提升使用场景的广泛性。
下面是一个用于对外暴露一个全局库的典型示例，展示如何配置 library、libraryTarget、以及全局对象的兼容性处理：
const path = require('path');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-lib.js',library: 'MyLib', // 将库暴露为全局变量名 MyLiblibraryTarget: 'umd', // 在不同环境下的暴露方案globalObject: "typeof self !== 'undefined' ? self : this" // 兼容浏览器和 Workers}
}如果你的目标是从一个默认导出中暴露一个对外接口，可以结合 libraryExport 指定具体导出的入口，例如暴露默认导出或命名导出：
module.exports = {output: {// ...library: {type: 'umd',name: 'MyLib',export: 'default' // 暴露默认导出}}
}3. externals 与多入口打包：在库模式下治理依赖的要点
在库构建场景中，externals 用于把某些依赖排除出打包产物，避免重复打包并让使用方自行提供依赖。常见的做法是把 React、Vue、jQuery 等大体量库设为 externals，从而减小打包体积，加速加载。对于面向浏览器的通用组件库，externals 的配置能显著提升跨项目的兼容性。
在多入口打包的场景下，externals 仍然有效，但需要确保不同入口对同一依赖的暴露名称一致，以避免冲突或重复加载。合理使用 externals 与 externalsType（如 var、commonjs2、module），可以让库在不同构建目标下保持稳定的外部依赖管理。
下面给出一个将 React 设为外部依赖的简化示例，适用于面向浏览器的组件库：
module.exports = {entry: {bundle: './src/index.js'},output: {path: require('path').resolve(__dirname, 'dist'),filename: '[name].js',libraryTarget: 'umd'},externals: {react: 'React', // 外部化 React，外部环境自带 React'react-dom': 'ReactDOM'}
}在某些场景下，如果是严格的模块化打包，externals 也可以配合 module 视图进行 ESM 外部化，从而让使用者直接通过 ESModule 引入依赖。
4. publicPath、CDN 与动态加载：让产物在生产环境高性能地分发
publicPath 指定了加载输出资源（脚本、图片、字体等）的基准路径，当你的产物需要在 CDN 上分发时，publicPath 应该指向 CDN 的前缀地址，确保浏览器能够正确获取到静态资源。除此之外，dynamic import 或按需加载的场景也会依赖 publicPath 来构造正确的 URL。
在部署到 CDN 时，推荐结合版本化的路径结构，例如使用内容地址（如 /static/v1.2.3/）以便回滚和缓存清理。通过设置 publicPath 为一个自动值（如 'auto'）或具体的域名前缀，可以实现无缝的资源定位。
下面给出一个示例，展示如何通过 publicPath 指向 CDN，以及配合内容哈希实现长期缓存：
module.exports = {output: {path: require('path').resolve(__dirname, 'dist'),filename: '[name].[contenthash].js',publicPath: 'https://cdn.example.com/assets/' // 指向 CDN 的前缀}
}5. 实战完整示例：从输出到库导出一个可直接发布的库
在实际发布一个可直接被其他项目使用的库时，通常需要结合 output、libraryTarget、externals、以及清晰的命名策略来达到最佳兼容性。完整的打包配置不仅要确保产物可在浏览器与 Node 环境中使用，还要避免把外部依赖重复打包，从而实现更小的体积和更快的加载速度。
以下是一个较为完整的示例，包含入口、输出、库导出以及外部依赖管理，便于直接发布为一个 NPM 包或 CDN 兼容的文件：
// webpack.config.js
const path = require('path');module.exports = {mode: 'production',entry: {myLib: './src/index.js'},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js',library: {name: 'MyLib',type: 'umd',export: 'default' // 暴露默认导出},globalObject: "typeof self !== 'undefined' ? self : this",publicPath: 'https://cdn.example.com/libs/' // CDN 路径示例},externals: {react: 'React' // 外部化 React，减小打包体积},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: { presets: ['@babel/preset-env', '@babel/preset-react'] }}}]},resolve: {extensions: ['.js', '.json']}
}该配置的核心要点包括：umd 的库目标、default 导出、以及 externals 的外部化处理，确保在不同环境下的易用性与体积控制。最终生成的 dist/ 目录下会出现 myLib.js 及其在不同运行环境中的入口方式，使用时只需按需加载即可。
在浏览器直接使用时，外部暴露的全局变量名为 MyLib，在 Node 环境下通过 CommonJS/ESModule 也能正确导入；且由于 externals 的配置，React 不会被打包到库中，从而实现更高的缓存命中率与更小的加载成本。
