# Starting a project with WebPack: reference error

**URL:** <https://discourse.threejs.org/t/starting-a-project-with-webpack-reference-error/8966>\
**Category:** Questions\
**Tags:** dev-tools\
**Created:** [August 9, 2019, 2:47pm UTC](https://discourse.threejs.org/t/starting-a-project-with-webpack-reference-error/8966 "2019-08-09T14:47:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://discourse.threejs.org/u/eric)\
**Post date:** [August 9, 2019, 2:47pm UTC](https://discourse.threejs.org/t/starting-a-project-with-webpack-reference-error/8966/1 "2019-08-09T14:47:13Z")

</div>

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](https://webpack.js.org/concepts/entry-points/). 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](https://github.com/Eric02/base-test/blob/e66f8785be000fb6d37339de5c83b1e5ec633b5f/webpack.common.js) or the [webpack.dev.js](https://github.com/Eric02/base-test/blob/e66f8785be000fb6d37339de5c83b1e5ec633b5f/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](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!

---

<div class="post-metadata">

**Author:** ![TheHappyKoala](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thehappykoala/32/6074_2.png) [@TheHappyKoala](https://discourse.threejs.org/u/TheHappyKoala)\
**Post date:** [August 9, 2019, 3:48pm UTC](https://discourse.threejs.org/t/starting-a-project-with-webpack-reference-error/8966/2 "2019-08-09T15:48:27Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://discourse.threejs.org/u/eric)\
**Post date:** [August 9, 2019, 4:11pm UTC](https://discourse.threejs.org/t/starting-a-project-with-webpack-reference-error/8966/3 "2019-08-09T16:11:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://discourse.threejs.org/u/eric)\
**Post date:** [August 16, 2019, 8:06am UTC](https://discourse.threejs.org/t/starting-a-project-with-webpack-reference-error/8966/4 "2019-08-16T08:06:46Z")

</div>

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

After reading more on the matter, I found that [Rollup](https://rollupjs.org/guide/en/) 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:

> **[Rollup | Rollup](https://rollupjs.org/guide/en/)**
>
> The JavaScript module bundler

> **[quotes - ESLint - Pluggable JavaScript Linter](https://eslint.org/docs/latest/rules/quotes)**
>
> A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

[![](https://img.youtube.com/vi/govQMsfzgZA/maxresdefault.jpg "My LIGHTWEIGHT build tooling setup") ](https://www.youtube.com/watch?v=govQMsfzgZA)

> **[Comment configurer Rollup pour des bundles toujours parfaits – Buzut](https://buzut.net/configurer-rollup-bundles-esm-cjs/)**
>
> Rollup est un bundler JavaScript. Il compile les dépendances et les exporte selon vos critères: CJS, ES Module… Voyons comment le paramétrer.

> **[JavaScript modules · V8](https://v8.dev/features/modules)**
>
> This article explains how to use JavaScript modules, how to deploy them responsibly, and how the Chrome team is working to make modules even better in the future.