Javascript 使用网页包将着色器纯文本导入JS脚本_Javascript_Webpack_Raw Loader

Javascript 使用网页包将着色器纯文本导入JS脚本

javascript webpack

Javascript 使用网页包将着色器纯文本导入JS脚本,javascript,webpack,raw-loader,Javascript,Webpack,Raw Loader,我有一个webgl项目，如果我将着色器从main.js硬编码为 var fragmentShaderSource = `#version 300 es.....etc' 另外，如果将它们保存在单独的JS文件中，我可以： import { vertexShaderSource } from './src/vertexShader.js' 其中我的vertexShader.js是： export const vertexShaderSource = `#version 300 es......e

我有一个webgl项目，如果我将着色器从main.js硬编码为

var fragmentShaderSource = `#version 300 es.....etc'

另外，如果将它们保存在单独的JS文件中，我可以：

import { vertexShaderSource } from './src/vertexShader.js'

其中我的vertexShader.js是：

export const vertexShaderSource = `#version 300 es......etc'

然而！实际上，我要做的是从纯文本文件（.txt、.frag或其他文件）中获取着色器，并在我的脚本中执行此导入：

要么：

import fragmentShaderSource from './src/main.frag';

或：

我研究了这个话题，我已经做了

npm i raw-loader

并完成了我的网页包配置文件：

var path = require('path');
const srcPath = path.resolve(__dirname, 'src');

const modulesPath = path.resolve(__dirname, 'node_modules');

module.exports = {
    mode: "development",
    devtool: false,
    devServer: {
        hot: true,
        historyApiFallback: true,
        port: 3000,
        stats: 'minimal',
    },
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'main.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
            },
            { 
                test: /\.(vert|frag)$/i,
                use: 'raw-loader',
                include: srcPath,
                exclude: modulesPath,
            },
            { 
                test: /\.txt$/,
                use: 'raw-loader',
                include: srcPath,
                exclude: modulesPath,
            }
        ]
    },
    stats: {
        colors: true
    },
};

但是对于我尝试的每个文件扩展名，我都会得到这两个错误

对于.frag：

未能加载模块脚本：服务器以非JavaScript MIME类型“应用程序/八位字节流”进行响应。根据HTML规范，对模块脚本执行严格的MIME类型检查[

对于.txt文件：

未能加载模块脚本：服务器使用非JavaScript MIME类型“text/plain”进行响应。根据HTML规范，对模块脚本执行严格的MIME类型检查[

还有我的html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet"> -->
  </head>
  <body>
      <canvas id="c"></canvas>
      <!--
      for most samples webgl-utils only provides shader compiling/linking and
      canvas resizing because why clutter the examples with code that's the same in every sample.
      See http://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html
      and http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
      for webgl-utils, m3, m4, and webgl-lessons-ui.
      -->
      <script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
      <script type="module" src="./main.js"></script>

      <div id="uiContainer">
        <div id="ui">
        </div>
      </div>
  </body>
</html>

在您的HTML中，任何帮助都是值得欣赏的，您应该使用捆绑包而不是源JavaScript。

根据您的网页包配置，捆绑文件将位于“build/main.bundle.js”中，但您的HTML加载“main.js”，这是您的非捆绑JavaScript。

在您的HTML中，您应该使用捆绑文件而不是源JavaScript。根据您的webpack配置，绑定的文件将位于“build/main.bundle.js”中，但您的HTML将加载“main.js”，这是未绑定的JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet"> -->
  </head>
  <body>
      <canvas id="c"></canvas>
      <!--
      for most samples webgl-utils only provides shader compiling/linking and
      canvas resizing because why clutter the examples with code that's the same in every sample.
      See http://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html
      and http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
      for webgl-utils, m3, m4, and webgl-lessons-ui.
      -->
      <script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
      <script type="module" src="./main.js"></script>

      <div id="uiContainer">
        <div id="ui">
        </div>
      </div>
  </body>
</html>