Starting a project with WebPack: reference error

Hello,

There are quite a few questions on WebPack but I couldn’t find something helpful for my case.

I am new to WebPack and I am trying to understand how it works by porting tested files (separated material lib, gltf loader, hdr env) to this new webpack dev environment.

I have configured the webpack environment be following the introduction available here. I have learnt how to manager different files types (even bin and gltf), hot reload, minimize,… and with their files, it works.

However, when I put my basic files in the “src” folder, corrected THREE path, FireFox/Chrome could not find images, gltf, hdri… so the scene is pitch black and I don’t understand how to fix this. Usually, 404 errors are easy to solve.

As my scene worked fine I’m guessing I am doing something wrong the webpack.common.js or the webpack.dev.js.

I have created a gitHub repo so that you can see exactly what I have done:
https://github.com/Eric02/base-test

I know there is a lot to learn to use webpack as a pro, but help me to make my first steps into this environment: I don’t see where my errors are. Maybe you can point where the error is and maybe you want to share how you configure your webpack environment with THREE.js.

Thank you!

Try changing var gltfLoader = new GLTFLoader().setPath('assets/');

to var gltfLoader = new GLTFLoader().setPath('./src/assets/');

I just retried this, to make sure, but it doesn’t work.

I thought someone could be interested in an update on this subject.

After reading more on the matter, I found that Rollup was a simpler alternative, at least for my needs.

Setup:
I configured two npm scripts: one to execute a dev version and the other, a build one. The following files work fine for me.

package.json

{
“name”: “base-rollup2”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “rollup -c rollup.config.build.js”,
“dev”: “rollup -c rollup.config.dev.js -w”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
@babel/core”: “^7.5.5”,
@babel/preset-env”: “^7.5.5”,
“babel-preset-es2015”: “^6.24.1”,
“livereload”: “^0.8.0”,
“rimraf”: “^2.6.3”,
“rollup”: “^1.12.0”,
“rollup-plugin-babel”: “^4.3.3”,
“rollup-plugin-commonjs”: “^10.0.2”,
“rollup-plugin-eslint”: “^7.0.0”,
“rollup-plugin-livereload”: “^1.0.1”,
“rollup-plugin-node-resolve”: “^5.2.0”,
“rollup-plugin-serve”: “^1.0.1”,
“rollup-plugin-terser”: “^5.1.1”,
“rollup-watch”: “^4.3.1”
},
“dependencies”: {
@webcomponents/webcomponentsjs”: “^2.2.10”,
“three”: “^0.107.0”
}
}

rollup.config.dev.js

import rimraf from ‘rimraf’;
import babel from ‘rollup-plugin-babel’;
import resolve from ‘rollup-plugin-node-resolve’;
import commonjs from ‘rollup-plugin-commonjs’;
import { terser } from ‘rollup-plugin-terser’;
import { eslint } from ‘rollup-plugin-eslint’;
import serve from ‘rollup-plugin-serve’;
import livereload from ‘rollup-plugin-livereload’;

rimraf.sync(‘build’);

export default {
input: ‘./src/main.js’,
output: {
format: ‘es’,
sourcemap: true,
file: ‘build/main.esm.min.js’
},
plugins: [
eslint({

}),
babel({
  exclude: 'node_modules/**'
}),
resolve(),
commonjs(),
terser(),
serve(),
livereload({
  watch: 'build',
  verbose: false
})

]
}

rollup.config.build.js

import rimraf from ‘rimraf’;
import babel from ‘rollup-plugin-babel’;
import resolve from ‘rollup-plugin-node-resolve’;
import commonjs from ‘rollup-plugin-commonjs’;
import { terser } from ‘rollup-plugin-terser’;

rimraf.sync(‘build’);

export default {
input: ‘./src/main.js’,
output: [{
format: ‘es’,
sourcemap: false,
file: ‘build/main.esm.min.js’
},
{
format: ‘iife’,
file: ‘build/main.iife.min.js’,
name: ‘iifeFile’
}],
plugins: [
commonjs(),
resolve(),
babel(),
terser()
]};

I also have configured a .babelrc file:

{
“env”: {
“esm”: {
“presets”: [
["@babel/preset-env", {
“targets”: {
“browsers”: [“since 2018”]
}
}]
]
},
“iife”: {
“presets”: [
["@babel/preset-env", {
“targets”: {
“browsers”: ["> 0.5%"]
}
}]
]
}
}
}

and a .eslintrc.js file:

module.exports = {
‘env’: {
‘browser’: true,
‘es6’: true
},
‘extends’: ‘eslint:recommended’,
‘globals’: {
‘Atomics’: ‘readonly’,
‘SharedArrayBuffer’: ‘readonly’
},
‘parserOptions’: {
‘ecmaVersion’: 2018,
‘sourceType’: ‘module’
},
‘rules’: {
‘indent’: [
‘error’,
‘tab’
],
‘linebreak-style’: [
‘error’,
‘windows’
],
‘quotes’: [
‘error’,
‘single’,
{ “avoidEscape”: true, “allowTemplateLiterals”: true } // fixes backticks invalid parsing error
],
‘semi’: [
‘error’,
‘always’
]
}
};

How to use this:
The index.html file is at the roof of the folder along with:

  • “build” folder: where compiled files are saved.
  • “static” folder: where images, gltf files are.
  • “src” folder: where all the JS files are.

As you’ll have two scripts (one for new browsers, one for old ones), there’s a trick for make each browser chose the right one. Refer to your js with this: ("<" missing at the beginning of each line)

script async type=“module” src="./build/main.esm.min.js">
script async nomodule src="./build/main.iife.min.js">

So, this setup has liveReload, eslint and Babel transpiling for old browsers and new ones. After creating these 5 files, “npm install” and you should be ready to start your next exciting THREE.JS project!

References:




https://buzut.net/configurer-rollup-bundles-esm-cjs/
https://v8.dev/features/modules
2 Likes