Webpack file-loader自定义路径配置：保留除src外的相对目录

针对你遇到的file-loader处理.mp4文件时无法正确保留除src外相对文件夹结构的问题，有两种简洁可靠的解决方案，直接就能满足你的需求：

方案一：利用context选项简化路径处理 #

这是最直接的方法，通过设置context为你的src目录，让file-loader自动以src为基准生成相对路径：

const path = require('path');

module.exports = {
  // ...你的其他Webpack配置（多入口等）
  module: {
    rules: [
      {
        test: /\.mp4$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              // 将上下文设置为src目录，file-loader会以此为基准计算相对路径
              context: path.resolve(__dirname, 'src'),
              // 保留上下文内的完整相对路径+文件名
              name: '[path][name].[ext]',
              // 输出根目录设为dist（Webpack默认就是dist，这里明确写出来更清晰）
              outputPath: './',
              // 根据你的部署需求调整公共路径，比如如果是相对路径就用'./'
              publicPath: './'
            }
          }
        ]
      }
    ]
  }
};

原理说明：当你把context设为src后，file-loader会把每个.mp4文件相对于src的路径作为[path]的值。比如src/assets/videos/demo.mp4，处理后输出路径就是assets/videos/demo.mp4，直接在dist目录下生成对应的文件夹结构，完美去掉了src前缀。

方案二：自定义name函数实现灵活路径处理 #

如果需要更复杂的路径逻辑（比如对不同目录的文件做不同处理），可以用name的函数形式手动处理路径：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.mp4$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: (filePath) => {
                // 获取文件相对于项目根目录的路径
                const relativePath = path.relative(__dirname, filePath);
                // 正则替换掉开头的src/前缀，保留后面的结构
                return relativePath.replace(/^src\//, '');
              },
              outputPath: './',
              publicPath: './',
              // 关闭默认的相对路径生成，用自定义逻辑替代
              useRelativePath: false
            }
          }
        ]
      }
    ]
  }
};

这个方法通过path.relative拿到文件的完整相对路径，再用正则去掉src/，同样能实现你要的效果，适合需要自定义路径规则的场景。

验证效果 #

不管用哪种方案，当你打包后，src下的assets/videos/demo.mp4都会被输出到dist/assets/videos/demo.mp4，完全保留除src外的文件夹结构，同时你的多入口配置也不受影响。

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