GLSL Shader-- —您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件

Question

我正在Three.js中做一个项目，当我尝试将着色器导入我的js文件时，出现此错误：

roll.js：154未捕获的错误：模块解析失败：意外的令牌（1：8）您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders

均匀的浮动时间；|均匀的浮角；|浮动进度一致；

这是我的webpack.config：

                    const webpack = require('webpack');
                    const path = require('path');

                    const config = require('./config.js');

                    const { themePath } = config;
                    const assetsPath = `${themePath}/assets`;


                    module.exports = {
                       mode: 'development',
                       devtool: 'inline-sourcemap',
                       resolve: {
                         alias: {
                            BezierPlugin: 'gsap/src/uncompressed/plugins/BezierPlugin',
                            ScrollToPlugin: 'gsap/src/uncompressed/plugins/ScrollToPlugin',
                            swiper: 'swiper/dist/js/swiper.min',
                      },
                    },
                    entry: {
                      app: ['./js/app.js'],
                    },
                    output: {
                      path: path.resolve(__dirname, `${assetsPath}/js-build`),
                      filename: '[name].bundle.js',
                    },
                    module: {
                      rules: [
                        {
                          test: /\.html$/,
                          loader: 'html-loader',
                          options: {
                            attrs: false,
                          },
                        },
                        {
                          test: /\.js$/,
                          exclude: /(node_modules|bower_components)/,
                          use: {
                            loader: 'babel-loader',
                            options: {
                              presets: ['@babel/preset-env'],
                            },
                           },
                         },
                        {
                           test: /\.(glsl|frag|vert)$/,
                           use: ['glslify-import-loader', 'raw-loader', 'glslify-loader']
                        },
                      ],
                    },

错误在哪里？

Answer 1

看起来像带有着色器的文件扩展名不是.glsl或.vert或.frag。

您只能在webpack配置中处理这些扩展。尝试将着色器文件重命名为[anything].glsl。