vue项目中webpack打包glsl文件不能编译，You may need an appropriate loader to handle this file type

最新推荐文章于 2025-04-07 09:29:03 发布

原创最新推荐文章于 2025-04-07 09:29:03 发布 · 9.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #javascript #three.js

three.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决Three.js中GLSL文件加载失败的问题。通过安装webpack-glsl-loader并配置webpack，成功实现了GLSL文件的正确加载。

报错内容如下

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

在这里插入图片描述

最近跟着学了下three的着色器，编写的GLSL文件，编译的时候报错，看意思可能是缺少loader，苦于不知道是那个loader，一番百度查询到的，在此记录一下
1、 npm install --save-dev webpack-glsl-loader 安装webpack-glsl-loader
2、修改vue.config.js配置，添加内容如下

  configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.glsl$/,

      use: [
        {
          loader: "webpack-glsl-loader",
        },
      ],
    });
  },