Webpack导入fragment.glsl报错：Module parse failed

Webpack 默认无法识别 GLSL 文件格式，你的项目未配置对应 loader 解析 .glsl 文件，导致编译时抛出模块解析失败错误。

针对你使用的 Webpack 模板，按以下流程配置即可解决：

• 安装依赖 loader
  在项目根目录执行命令安装 raw-loader（它可将文本文件直接导出为字符串，适配着色器代码的导入需求）：

  npm install raw-loader --save-dev
  

• 修改 webpack.config.js
  在配置文件的 module.rules 数组中添加处理 GLSL 文件的规则：

  module.exports = {
    // 保留原有配置项
    module: {
      rules: [
        // 保留原有规则（如JS、CSS处理规则）
        {
          test: /\.(glsl|vs|fs|vert|frag)$/,
          exclude: /node_modules/,
          use: ['raw-loader']
        }
      ]
    }
  }
  

• 正确导入GLSL文件
  现在可以在 JS 文件中直接导入，文件会被解析为字符串：

  import fragmentShader from './shaders/fragment.glsl'
  

• 重启开发服务
  关闭当前运行的开发服务，重新执行 npm start，新配置才会生效。

如果之前尝试 glsl-loader 未成功，多半是因为该 loader 需要配合额外工具（如 glslify）或配置有误。raw-loader 更简单直接，适合基础着色器导入场景。

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