如何让Webpack动态文件名导入在生产环境正常工作？

Webpack 是静态编译工具，编译阶段会静态分析代码中的导入语句。你使用的动态模板字符串 require(../styles/${filename}.css) 属于动态导入，Webpack 无法在编译期确定所有可能的 filename 值，因此生产环境下会忽略这类无法静态解析的导入，导致 styles 目录的文件未被打包到 dist 中。

方案1：使用 require.context 明确打包范围 #

通过 require.context 告诉 Webpack 要打包 styles 目录下的所有 CSS 文件，同时可以在代码中检查目标文件是否存在，替代原有的 try/catch 逻辑：

// 创建styles目录的上下文，匹配所有.css文件
const stylesContext = require.context('../styles/', false, /\.css$/);

export function applyCSS(filename) {
  const targetPath = `./${filename}.css`;
  // 检查目标文件是否存在于上下文的文件列表中
  if (stylesContext.keys().includes(targetPath)) {
    stylesContext(targetPath);
  } else {
    stylesContext('./default.css');
  }
}

• 原理：require.context 会让 Webpack 扫描指定目录下符合匹配规则的所有文件，并将它们全部打包到产物中，同时返回一个上下文函数用于加载对应文件。
• 优势：无需额外插件，完全利用 Webpack 自身的模块机制，同步执行逻辑和原代码一致。

方案2：使用 ES 动态 import（推荐现代项目使用） #

改用 ES 标准的动态 import 语法，Webpack 会自动将这类动态导入的文件打包为单独的 chunk，生产环境下会包含所有可能的目标文件：

export async function applyCSS(filename) {
  try {
    await import(`../styles/${filename}.css`);
  } catch {
    await import(`../styles/default.css`);
  }
}

• 注意：动态 import 是异步操作，调用该函数时需要使用 await 或者 .then() 处理。
• 可选配置：如果需要自定义 chunk 名称，可以添加魔法注释：import(/* webpackChunkName: "styles-[request]" */ ../styles/${filename}.css)，方便在 dist 中识别对应 chunk。

方案3：直接复制 styles 目录到产物（适合外部加载场景） #

如果不需要 Webpack 处理 CSS 的打包，只想将 styles 目录完整复制到 dist，可以使用 copy-webpack-plugin：

1. 安装插件 #

npm install copy-webpack-plugin --save-dev
# 或者 yarn add copy-webpack-plugin -D

2. 配置 Webpack #

在 webpack.config.js 中添加插件配置：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他 Webpack 配置...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: './src/styles', to: 'styles' }, // 复制src/styles到dist/styles
      ],
    }),
  ],
};

3. 修改加载逻辑 #

通过创建 DOM 标签的方式动态加载 CSS 文件：

export function applyCSS(filename) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  // 加载失败时切换到默认样式
  link.onerror = () => {
    link.href = './styles/default.css';
  };
  link.href = `./styles/${filename}.css`;
  document.head.appendChild(link);
}

• 优势：适合需要直接操作外部 CSS 文件的场景，无需依赖 Webpack 的模块解析。

内容的提问来源于stack exchange，提问作者Wally Jose