使用Angular導入模塊內部的自定義文件

嘗試從舊的體系結構移動到模塊化世界，並使用npm與Three和Angular的posprocessing包。使用Angular導入模塊內部的自定義文件

當從後處理它提供了以下錯誤導入模塊：

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設置的東西。任何想法如何啓用導入自定義文件擴展名？

來源

2017-04-25 mjanisz1

好像你正試圖導入一個webgl片段。充分披露，我不太瞭解他們。然而，問題是，的WebPack（配置隱藏在角CLI）不具有裝載機處理要導入.frag

上裝載機讀這裏的文件類型：https://webpack.js.org/concepts/loaders/

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

彈出您的角度，CLI應用程序輸出的WebPack配置：https://github.com/angular/angular-cli/wiki/eject
添加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/ } 
    ] 
    }

來源

2017-04-25 14:11:53

進出口新的的WebPack，和排出後的角度的WebPack配置相當複雜。你能描述在哪個地方正確地插入裝載器嗎？ – mjanisz1

在'loaders'下的webpack配置文件中，就像'glslify-loader'頁面建議的一樣。我會更新答案 –

這仍然只能通過彈出角度cli應用程序嗎？ – daniel

使用Angular導入模塊內部的自定義文件

回答

相關問題