An Angular 2 Webpack setup for development and production

When working on a front-end javascript project proper tooling can highly increase your productivity. When you’re ready to go live, you need a proper and optimized production build. Webpack can be used for both. Configuring all this can be quite overwhelming and challenging. I like to show you a setup which works great for me.

TLDR: here’s a Github repo: https://github.com/luukgruijs/angular2-webpack-example

Let’s create a new folder in the root of your application folder named: build. Our build folder will eventually look like this:

- build

• build.js
• config.js
• dev_client.js
• dev_server.js
• env_dev.js
• env_prod.js
• webpack_base_config.js
• webpack_dev_config.js
• webpack_prod_config.js

Let’s start with our config file as this is the backbone of our setup.

We specify two config objects. One for our production build and one for our development setup. You can configure the values as you like. In this file we import two environment files which look like this:

Now we setup our webpack_base_config file. This file has some basic Webpack configuration which will be used by both the development and production build.

We first specify our entry files. In this case vendor a file which imports all thirdparty libraries, polyfills which imports the polyfills that angular requires, client is our main Angular file that starts up our app and which is often called main.ts or root.ts . At last we specify styles which imports all our .scss and .css files.

After this we specify loaders for some of the filetypes Webpack can encounter in your project. This list can be extended or changed based on your project needs.

Then we set a list of plugins. These plugins will all be used by the production and development setup. You can extend the list of plugins with other plugins that are needed for both development and production.

Our development build setup

Our development setup will use Hot Module Reloading. This makes sure that any changes you make to files in your project will be immediately reflected in your page. Either by injecting it directly into the page or by an automatic refresh.

Our webpack_dev_config.js can look like this:

This config extends the config from webpack_base_config.js. This file starts by adding hot reloading middleware to each entry. We do this in dev_client.js. This file can look this:

In order to make the Hot Module Reloading shine we need to setup a small express server. We will do this in dev_server.js . This file can possibly look like this:

We have now setup our development build. We will add a script to easily start this build at the end of this article. We’re now ready to setup our production build.Our development build setup

Our production build setup

Our production setup will optimize our build by removing all code we don’t need and reducing file size by minifying files and creating GZIPPED-files. Our production setup uses the webpack_prod_config.js file. This file can possibly look like this:

We use this production configuration in our build.js file. This file can possibly look like this:

The build.js file is what we execute to start our production build. This file starts a nice spinner, then cleans our dist folder and finally creates the new build.

Putting it all together

To start the development or production build we can add scripts in our package.json. Here’s my package.json file with the scripts and all the dependencies:

As you can see, we’ve defined two scripts at the top of our file. We can run the scripts by typing: npm run dev or npm run prod. The package.json file typically lives in the root of your project.

Conclusion

Using this setup you can start building your angular applications in no time. Here’s the Github again: https://github.com/luukgruijs/angular2-webpack-example. If you have any feedback or have ideas on how to make it better, please make a pull-request.

Thanks for reading. Any feedback? Let me know. Also check my other articles:

• https://hackernoon.com/global-http-request-error-catching-in-angular-486a319f59ab
• https://medium.com/@luukgruijs/ngrx-effects-setting-up-reusable-effect-functions-2b5fa299577b
• https://hackernoon.com/ngrx-store-reuse-reducer-logic-b6c0449e695d

Follow me on Medium and let’s connect on LinkedIn