javascript - 使用 webpack 将着色器纯文本导入 JS 脚本

问题描述

我有一个 webgl proyect，如果我从我的 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';

或者：

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

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

npm i raw-loader

并完成了我的 webpack 配置文件：

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：

加载模块脚本失败：服务器以“application/octet-stream”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。[ http://localhost:3000/src/main.frag]

对于 .txt：

加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。[ http://localhost:3000/src/frag.txt]

还有我的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>

非常感谢任何帮助

标签： javascriptwebpackraw-loader

javascript - 使用 webpack 将着色器纯文本导入 JS 脚本

问题描述

解决方案

推荐阅读