Webpack如何无需复制父目录数据同时适配开发及生产环境路径

解决方法如下： #

1. 调整webpack配置

修改webpack.config.js，分别处理构建解析规则和开发服务的静态资源映射：

const path = require('path');
const webpack = require('webpack');
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  // 保留你原有其他配置项
  plugins: [
    new webpack.DefinePlugin({
      // 按实际生产部署的根路径修改这里的生产环境值
      __DATA_PREFIX__: JSON.stringify(isProd ? '/project-name' : '')
    })
  ],
  devServer: {
    static: [
      // 原有dist静态目录配置保留
      { directory: path.join(__dirname, 'dist') },
      // 新增data目录静态映射，开发环境可直接访问/data路径下的文件
      { directory: path.join(__dirname, 'data'), publicPath: '/data' }
    ]
  }
}

2. 修改代码中的资源引用逻辑

不要用import/require引入csv文件，避免webpack尝试解析该资源导致构建报错，改用注入的全局变量拼接路径：

// src/index.js 示例
const dataUrl = `${__DATA_PREFIX__}/data/data.csv`
// 正常请求数据即可
fetch(dataUrl).then(res => res.text()).then(csvContent => {
  // 业务逻辑处理
})

3. 生产部署规则

部署时直接按照你期望的目录结构放置文件：data文件夹和dist文件夹平级放在project-name根目录下即可，不需要将data目录拷贝到dist内部。

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