hanyeah

使用typescript开发，使用webpack打包，项目中要用到shader。如何把shader代码放到独立的文件中，打包时打包进去。

使用ts-shader-loader，首先安装ts-shader-loader，然后在webpack的打包配置文件中配置：

module: {
  rules: [
    {
      test: /\.ts$/,
      use: 'ts-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(glsl|vs|fs)$/,
      loader: 'ts-shader-loader',
      exclude: /node_modules/
    }
  ],
},

再声明接口：

declare module '*.glsl' {
  const value: string;
  export default value;
}

然后就可以import了：

import electroVertex from "./glsl/electroVertex.glsl";
import electroFragment from "./glsl/electroFragment.glsl";

还有一个小问题，打包之后的shader代码没有压缩。
compress-shader-loader可以压缩，但是有bug。