使用Angular导入模块内部的自定义文件

Question

尝试从旧的体系结构移动到模块化世界，并使用npm与Three和Angular的posprocessing包。

当从后处理它提供了以下错误导入模块：

Failed to compile. 

./~/postprocessing/src/materials/adaptive-luminosity/glsl/shader.frag 
Module parse failed: (...)/materials/adaptive-luminosity/glsl/shader.frag Unexpected token (1:8) 
You may need an appropriate loader to handle this file type. 
| uniform sampler2D tPreviousLum; 
| uniform sampler2D tCurrentLum; 
| uniform float minLuminance; 
@ ./~/postprocessing/src/materials/adaptive-luminosity/index.js 3:0-42 
@ ./~/postprocessing/src/materials/index.js 

我认为它与角CLI设置的东西。 任何想法如何启用导入自定义文件扩展名？

Answer 1

好像你正试图导入一个webgl片段。充分披露，我不太了解他们。然而，问题是，的WebPack（配置隐藏在角CLI）不具有装载机处理要导入.frag

上装载机读这里的文件类型：https://webpack.js.org/concepts/loaders/

这里就是你可以做，如果你真的想使用角CLI

1. 弹出您的角度，CLI应用程序输出的WebPack配置：https://github.com/angular/angular-cli/wiki/eject
2. 添加glslify-loader到的WebPack配置：https://github.com/stackgl/glslify-loader

从glslify-loader DOC：

npm install --save glslify-loader raw-loader

然后在的WebPack配置文件的loaders部分，添加：

loaders: [ 
     { test: /\.(glsl|frag|vert)$/, loader: 'raw', exclude: /node_modules/ }, 
     { test: /\.(glsl|frag|vert)$/, loader: 'glslify', exclude: /node_modules/ } 
    ] 
    }