Setting up the WebPack Dev Server
We will use the Webpack Development Server to run our threejs code.
The Webpack Development Server has several features that make development an easier process. Such as Hot Module Reloading (HMR) which will auto refresh our browser when we makes changes to our code,
We need to install several modules so that we can use Webpack effectively.
npm install webpack webpack-cli webpack-dev-server webpack-merge ts-loader --save-dev
- webpack : Contains the core that will bundle our code into development and production versions.
- webpack-cli : the command line tools that we use to run webpack.
- webpack-dev-server : A HTML server that will load our code and provide the HMR functionality during the development phase.
- webpack-merge : A webpack tool library that allows splitting webpack configurations into several files.
- ts-loader : A module rule for processing TypeScript files.
We will also need a local copy of TypeScript in the
node_modules folder for use by the
npm install typescript --save-dev
Now to add some Webpack configurations to our client.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
1 2 3 4 5 6 7 8 9 10 11
We will add a webpack production configuration later on in the course.
Now to add a script for starting the webpack dev server into
scripts node, add a new command for
dev, see the highlighted line.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Now we can run our project and see a Threejs examples running in the browser.
npm run dev
If when starting, you see the error
... events.js:174 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE: address already in use :::8080 ... etc, and many more lines
This error means that port 8080 is already in use somewhere.
You probably have another project started on your PC somewhere using port 8080. Close that project and then try restarting again.