如何配置Angular 17构建器支持.glsl文件？原Webpack方案失效

由于Angular 17切换为Vite作为默认构建工具，处理.glsl文件需要借助Vite生态的插件来实现，以下是完整步骤：

1. 安装着色器处理插件 #

使用vite-plugin-glsl插件解析、导入.glsl（及vert/frag等）着色器文件，执行安装命令：

npm install vite-plugin-glsl --save-dev
# 或 yarn
yarn add vite-plugin-glsl --dev
# 或 pnpm
pnpm add vite-plugin-glsl -D

2. 配置Vite自定义配置文件 #

在项目根目录创建vite.config.ts，导入并注册插件：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/vite/index.js';
import glsl from 'vite-plugin-glsl';

export default defineConfig({
  plugins: [
    angular(),
    glsl({
      // 可选配置：按需开启代码压缩、监听文件变化等
      compress: false,
      watch: true
    })
  ]
});

3. 添加TypeScript类型声明 #

让TypeScript识别.glsl模块，在src目录下创建typings.d.ts文件：

// 处理.glsl文件
declare module '*.glsl' {
  const content: string;
  export default content;
}

// 可选：添加其他着色器文件后缀的声明
declare module '*.vert' {
  const content: string;
  export default content;
}

declare module '*.frag' {
  const content: string;
  export default content;
}

4. 在代码中导入并使用着色器 #

以Three.js场景为例，在组件中直接导入并使用着色器代码：

import { Component, OnInit } from '@angular/core';
import * as THREE from 'three';
import vertexShader from './shaders/vertex.glsl';
import fragmentShader from './shaders/fragment.glsl';

@Component({
  selector: 'app-shader-demo',
  templateUrl: './shader-demo.component.html'
})
export class ShaderDemoComponent implements OnInit {
  ngOnInit(): void {
    const shaderMaterial = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms: {
        // 按需定义着色器uniform变量
      }
    });
    // 后续材质挂载、场景渲染逻辑...
  }
}

注意事项 #

• vite-plugin-glsl默认支持.glsl文件中的#include嵌套导入，无需额外配置。
• 生产环境可开启compress: true参数压缩着色器代码，减少打包体积。

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