分号分隔CSV文件Webpack解析失败，配置Papaparse及csv-loader仍报错

• 配置csv-loader处理分号分隔的CSV

  1. 安装依赖：

     npm install csv-loader --save-dev
     

  2. 在webpack配置文件中添加规则，指定分号作为分隔符：

     module.exports = {
       module: {
         rules: [
           {
             test: /\.csv$/,
             use: [
               {
                 loader: 'csv-loader',
                 options: {
                   delimiter: ';'
                 }
               }
             ],
             include: /public/ // 确保匹配到你的CSV文件所在目录
           }
         ]
       }
     };
     

• 用Papaparse手动解析（无需webpack loader）
  如果loader配置无效，直接通过fetch读取文件再解析：

  1. 安装Papaparse：

     npm install papaparse
     

  2. 在代码中实现解析：

     import Papa from 'papaparse';
     
     fetch('/data-test.csv')
       .then(res => res.text())
       .then(csvContent => {
         const parsedData = Papa.parse(csvContent, { delimiter: ';' });
         // 这里处理解析后的数据
         console.log(parsedData.data);
       })
       .catch(err => console.error('解析CSV出错:', err));
     

• 排查常见问题

  • 如果你用的是Vue CLI、Create React App这类脚手架，不能直接修改默认webpack配置，需要用对应工具的自定义配置方式（比如vue.config.js、craco.config.js）。
  • 检查CSV文件本身是否有格式错误，比如未闭合的引号、异常换行等。
  • 确认csv-loader、Papaparse的版本与当前webpack版本兼容。

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