1.Webpack 输出配置详解与基础应用场景
输出路径与文件命名策略
在构建产物时，输出路径（output.path）决定了打包完成后文件放置的目录。通过使用 path.resolve 可以确保跨平台路径一致性，例如将产物输出到 dist 目录。
配合 filename、chunkFilename，可以实现稳定的缓存与分块加载。常见做法是使用 [name].[contenthash].js 作为主入口脚本的名称，确保当源码变动时浏览器能够正确加载新的文件。
// webpack.config.js 片段：输出路径与文件命名
const path = require('path');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'static/js/[name].[contenthash].js',chunkFilename: 'static/js/[name].[contenthash].chunk.js',// 通过 contenthash 提升浏览器缓存命中率},
};
公共路径与资源前缀
publicPath 用于指示浏览器在加载按需分发的资源时应该前往的根路径。对部署在子路径或 CDN 上的应用，正确设置 publicPath 能确保 import 的分块资源、以及静态资源的命名都指向正确的位置。
在开发阶段，publicPath 可以设为 '/'，而在生产阶段可以改为 'https://cdn.example.com/'，以实现静态资源的缓存与分发优化。
// 示例：不同环境的 publicPath
module.exports = {// ...output: {path: path.resolve(__dirname, 'dist'),publicPath: process.env.NODE_ENV === 'production'? 'https://cdn.example.com/assets/': '/'}
};
产物分块与缓存策略
除了主入口之外，chunkFilename 指定按需加载的代码块的命名，合理的命名可以提升缓存效率并减小二次加载成本。结合 splitChunks 可以把公共代码提取为单独的 chunk。
assetModuleFilename 则用于定义资源（图片、字体、媒体等）的输出路径与名称，有助于统一资源命名以及缓存策略。
// 组合输出与资源命名的配置
module.exports = {// ...output: {path: path.resolve(__dirname, 'dist'),filename: 'static/js/[name].[contenthash].js',chunkFilename: 'static/js/[name].[contenthash].chunk.js',assetModuleFilename: 'static/media/[hash][ext][query]'},module: {rules: [{test: /\\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource'}]}
};
实际示例：生产环境输出配置要点
在生产构建中，输出的稳定性与缓存策略尤为关键。通过开启 clean 可在每次构建时清理上次产物，保持 dist 目录整洁；通过 contenthash 可以让未改动的模块仍然被浏览器缓存。
下面的示例同时演示了 path、filename、publicPath 与 clean 的组合效果。
// 完整示例：生产环境输出
const path = require('path');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'static/js/[name].[contenthash:8].js',chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',publicPath: '/',assetModuleFilename: 'static/media/[hash][ext][query]',clean: true},
};
2. 进阶应用：库打包、跨环境输出与部署场景
将产物暴露为库（library 与 libraryTarget）
在需要将打包产物作为可重用库分发时，library 与 libraryTarget 提供了对外暴露形态的控制。通过将库暴露为 UMD、CommonJS 或者自定义全局变量，可以实现跨框架调用。
常见配置包括：将库导出为全局变量 window.MyLib，或在 Node 中以模块形式引入。结合 globalObject 的设置，确保在不同环境中的对象定位正确。
// 将产物暴露为库的配置示例
module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-lib.js',library: 'MyLib',libraryTarget: 'umd',globalObject: 'typeof self !== "undefined" ? self : this'}
};
适配多环境输出（浏览器、Node、WebWorker）
不同运行时对全局对象的引用不同，globalObject 的设置用于确保库在浏览器、Node、WebWorker 等环境中都能正确访问全局对象，从而避免在严格模式或沙箱中出错。
在构建多环境的应用中，使用 target 选项也很常见，它帮助 Webpack 在解析全局变量（如 document、window、process）的行为上做出正确优化。
// 支持多环境输出的综合配置
module.exports = {mode: 'production',target: ['web', 'es6'],entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js',library: 'MyMultiEnvLib',libraryTarget: 'umd',globalObject: 'typeof self !== "undefined" ? self : this'}
};
实际案例：Webpack 配置示例
以下示例展示了一个包含入口、输出、缓存和库暴露的综合用例，适用于需要将应用打包成可直接在浏览器使用的脚本，以及作为库在其他项目中引入。
// 综合案例：应用 + 库导出
const path = require('path');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'app.[contenthash].js',chunkFilename: 'chunk.[name].[contenthash].js',publicPath: '/',clean: true,library: 'AppBundle',libraryTarget: 'umd',globalObject: 'typeof self !== "undefined" ? self : this'},optimization: {splitChunks: {chunks: 'all'}}
};
