面试题：Webpack 多环境配置下如何动态加载环境特定的资源

设计思路

环境变量定义：通过在不同构建环境下设置不同的环境变量来区分开发、测试、生产等环境。Webpack 可以使用 DefinePlugin 来注入环境变量到代码中。
资源配置文件：为每个环境创建独立的配置文件，用于存储特定环境的资源路径，如 API 地址、样式主题文件路径等。
动态加载策略：利用 JavaScript 的动态导入（import()）特性，在运行时根据环境变量加载对应的资源文件。这样可以实现按需加载，提高性能。同时，要考虑兼容性，对于不支持动态导入的浏览器，可以使用 babel 进行转译。

具体实现方案

设置环境变量：
- 在 package.json 中定义不同环境的脚本，例如：

{
  "scripts": {
    "dev": "cross - env NODE_ENV = development webpack - serve",
    "test": "cross - env NODE_ENV = test webpack - build",
    "prod": "cross - env NODE_ENV = production webpack - build"
  }
}

- 在 Webpack 配置文件（`webpack.config.js`）中使用 `DefinePlugin` 注入环境变量：

const webpack = require('webpack');

module.exports = {
  //...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

创建环境配置文件：
- 在项目根目录下创建 config 文件夹，分别创建 dev.js、test.js、prod.js 等文件，例如 dev.js：

module.exports = {
  apiUrl: 'http://localhost:3000/api',
  themeFile: './src/styles/devTheme.css'
};

动态加载资源：
- 在代码中根据环境变量动态导入资源，例如：

async function loadResources() {
  let config;
  if (process.env.NODE_ENV === 'development') {
    config = await import('./config/dev.js');
  } else if (process.env.NODE_ENV === 'test') {
    config = await import('./config/test.js');
  } else {
    config = await import('./config/prod.js');
  }

  // 加载 API 相关逻辑
  const response = await fetch(config.apiUrl);
  // 加载样式主题
  const link = document.createElement('link');
  link.rel ='stylesheet';
  link.href = config.themeFile;
  document.head.appendChild(link);
}

loadResources();

兼容性处理：
- 确保项目中配置了 babel，并在 .babelrc 或 babel.config.js 中添加对动态导入的支持，例如：

{
  "presets": [
    "@babel/preset - env"
  ]
}

这样就可以在运行时根据当前环境动态加载特定资源，并保证性能和兼容性。

星途面试题库

面试题：Webpack 多环境配置下如何动态加载环境特定的资源

知识考点

面试题答案

设计思路

具体实现方案