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:
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
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.
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:
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.
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: