Starting a project with WebPack: reference error

Questions
1

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!

2

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

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

3

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

4

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:

2 Likes