CODEWITHSUNDEEP
javascriptwebpackraw-loader
rustyBucketBay
rustyBucketBay

Reputation: 4561

Import shader plain text into JS script with webpack

I have a webgl proyect and I am able to load my shaders if I hardcode them from my main.js as 

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

Also if keep them in a separated JS file I can do:

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

Where my vertexShader.js is:

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

However! what I want to in fact do is obtain the shader from plain text files (.txt, .frag or whatever) and make this imports work in my script:

Either:

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

or:

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

I researched about the topic and I did already the 

npm i raw-loader

And fulfilled my webpack config file:

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
    },
};

But I obtain this two errors for each of the file extension I try.

For the .frag:

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec. [http://localhost:3000/src/main.frag]

And for the .txt:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec. [http://localhost:3000/src/frag.txt]

Also my html code:

<!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>

Any help is much appreciatted

Upvotes: 0

Views: 1144

Answers (1)

geekonaut
geekonaut

Reputation: 5954

In your HTML, you should use the bundle instead of the source JavaScript. According to your webpack config, the bundled file will be in "build/main.bundle.js" but your HTML loads "main.js", which is your unbundled JavaScript.

Upvotes: 3

Related Questions