面试题：Webpack中output的publicPath动态配置原理与实践

动态配置publicPath的方法

开发环境：在开发环境中，通常希望资源能够直接从本地服务器加载，publicPath 可以设置为相对路径或根路径。比如设置为 '/'，这样本地开发服务器在提供资源时，路径是相对根目录的。可以在 webpack.config.js 中直接设置：

module.exports = {
  output: {
    publicPath: '/'
  }
};

生产环境：生产环境下，资源可能会部署到CDN等不同的服务器上。这时需要根据实际的CDN地址来设置publicPath。比如CDN地址为 https://cdn.example.com/，则配置为：

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/'
  }
};

原理

Webpack 的 publicPath 配置决定了打包后资源的引用路径。当浏览器加载页面时，会根据这个路径去寻找相应的资源文件（如js、css、图片等）。在不同环境下设置不同的 publicPath，可以确保资源能正确加载。在开发环境下相对路径或根路径便于本地服务器访问；在生产环境下，CDN地址能让资源快速、高效地被全球用户访问。

实践步骤

通过环境变量区分环境：在项目根目录创建 .env.development 和 .env.production 文件，分别定义开发和生产环境的变量。例如在 .env.development 中添加 NODE_ENV=development，在 .env.production 中添加 NODE_ENV=production。
安装 dotenv 库：npm install dotenv --save-dev，这个库可以加载环境变量文件。
在 webpack 配置中使用环境变量：在 webpack.config.js 中：

const dotenv = require('dotenv');
dotenv.config();

let publicPath;
if (process.env.NODE_ENV === 'development') {
  publicPath = '/';
} else if (process.env.NODE_ENV === 'production') {
  publicPath = 'https://cdn.example.com/';
}

module.exports = {
  output: {
    publicPath: publicPath
  }
};

使用不同的启动脚本：在 package.json 中设置不同的启动脚本，如 "start": "NODE_ENV=development webpack serve", "build": "NODE_ENV=production webpack --config webpack.config.js"。这样在开发和生产构建时会根据不同环境设置正确的 publicPath。

面试题：Webpack中output的publicPath动态配置原理与实践

知识考点

面试题答案

动态配置publicPath的方法

原理

实践步骤