在前端开发中，处理图形和动画的同时，我们会用到着色器（shader）技术。而 Webpack 作为前端工作的一种打包工具，也可以很好地处理 shader。我们可以使用 shader-loader 这个 npm 包来帮助我们处理 Webpack 中的着色器。
什么是 shader-loader？
shader-loader 是一个 Webpack 加载器（loader），用于将着色器代码编译成可供浏览器使用的 JavaScript 代码。该加载器支持 GLSL 和 HLSL 两种着色器语言，以及常见的着色器类型：顶点着色器、片段着色器以及几何着色器。
安装 shader-loader
在使用 shader-loader 之前，首先需要在项目中安装此 npm 包。在终端中输入以下命令即可完成安装：
npm install shader-loader --save-dev
使用 shader-loader
安装完成后，需要在 Webpack 的配置文件中配置该加载器。我们使用以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------------------------
-------- ---------------
---- -
---------------
-
-
-
-
-在上述代码中，test 即为着色器的文件类型。可以看到，这里使用了一个正则表达式将 GLSL 和 HLSL 文件都匹配了。exclude 只匹配项目中的着色器，不包括依赖包里的着色器。 use 中则传入了一个 shader-loader，告诉 Webpack 当匹配到着色器文件时，使用该加载器来处理。
一般来说，我们的着色器文件都是 .glsl 后缀名，那么在配置 Webpack 的时候，也是只配置 .glsl 的。
示例代码
既然已经知道了如何在 Webpack 中使用 shader-loader，那么我们就来看一下 shader-loader 具体如何使用。
例如，我们有一个顶点着色器文件 vertexShader.glsl，代码如下：
-- -------------------- ---- ------- --------- ---- --------- ------- ---- ------------ ------- ---- ----------- ------- ---- ----------------- ------- ---- ---------- ---- ------ - ---- ----------------- - ---------- - ----------- - -------------- ----- ---- ------------------------ - ---------------- - ------------------ ----------- - ------------------------- --------- - --------- -
使用 webpack 会将它编译成 js 常量如下:
export default "#define varying varying\nattribute vec3 position;\n\nuniform mat4 modelMatrix;\nuniform mat4 viewMatrix;\nuniform mat4 projectionMatrix;\n\nvarying vec3 vPosition;\n\nvoid main() {\n vec4 modelViewPosition = viewMatrix * modelMatrix * vec4(position, 1.0);\n vec4 positionRelativeToCamera = projectionMatrix * modelViewPosition;\n gl_Position = positionRelativeToCamera;\n vPosition = position;\n}\n"然后我们在其他 js 文件中引用它，使用 shader-loader 就像这样：
import vertexShader from './vertexShader.glsl';
const shader = new THREE.RawShaderMaterial({
vertexShader,
// other code...
})当然，其他的几何着色器以及片段着色器的写法和顶点着色器一样，只需要改变扩展名即可。
总结
shader-loader 为我们提供了一个比较好的解决方案，在项目开发的时候，可以方便地使用 Webpack 来处理着色器模块。同时，也为开发者提供帮助，让他们可以在不考虑 Webpack 中着色器的复杂性的情况下，更好地关注于着色器的核心部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcad9b5cbfe1ea06124cb