When working on a front-end project proper tooling can highly increase your productivity. When you’re ready to go live, you need a proper and optimized production build. 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. javascript Webpack 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: . Our build folder will eventually look like this: build - 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 file as this is the backbone of our setup. config 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 file. This file has some basic Webpack configuration which will be used by both the development and production build. webpack_base_config We first specify our entry files. In this case a file which imports all thirdparty libraries, which imports the polyfills that angular requires, is our main Angular file that starts up our app and which is often called or . At last we specify which imports all our .scss and .css files. vendor polyfills client main.ts root.ts styles 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 can look like this: webpack_dev_config.js This config extends the config from . This file starts by adding hot reloading middleware to each entry. We do this in . This file can look this: webpack_base_config.js dev_client.js In order to make the Hot Module Reloading shine we need to setup a small express server. We will do this in . This file can possibly look like this: dev_server.js 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 file. This file can possibly look like this: webpack_prod_config.js We use this production configuration in our file. This file can possibly look like this: build.js The 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. build.js Putting it all together To start the development or production build we can add scripts in our . Here’s my file with the scripts and all the dependencies: package.json package.json As you can see, we’ve defined two scripts at the top of our file. We can run the scripts by typing: or . The package.json file typically lives in the root of your project. npm run dev npm run prod Conclusion Using this setup you can start building your angular applications in no time. Here’s the Github again: . If you have any feedback or have ideas on how to make it better, please make a pull-request. https://github.com/luukgruijs/angular2-webpack-example 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

Too Long; Didn't Read

Making security fun one episode at a time

An Angular 2 Webpack setup for development and production

Too Long; Didn't Read

Luuk Gruijs

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

An Angular 2 Webpack setup for development and production

Too Long; Didn't Read

Luuk Gruijs

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES