Aug 13, 2017
I've just updated to Angular 4 with Webpack 3 (Angular 4 update instruction)
As a developer we all need a seed project that contains all things ready for development, such as source code structure, development tools and build. So let's start explore it.
Fork or download on Github.
What we are going to achieve?
- Standard code structure (recommended from Angular)
- Using SASS for styling
- Auto reload when changes in development
- Build for Development and Production modes
Standard code structure
config/ dist/ src/ | --app/ --assets/ --public/ --index.html --main.ts --polyfills.ts --vendor.ts .gitignore package.json readme.md tsconfig.json tslint.json webpack.config.js
This folder contains all Webpack config files (
Why do we need to separate them? Because we have different strategies for building on Development and Production. For example, in Prod mode, we need to minify the source code to reduce the page load when deploy on server, or we have some configures like API urls, they are also different from Dev and Prod.
All source code will be placed in this folder. We will go from top to bottom. The first one, you can see the App folder, this one contains all app source code. Assets will contains images, logo and so on. The Public, it will contain all public things such as the CSS for whole application, as we know we can define style for specific Angular component.
What is the rest?
main.ts, bootstraps your Angular app
polyfills.ts, this one contains all libraries which need for run Angular code on browsers.
vendor.ts, this contains all libraries (Angular, JQuery ...) import for the app.
We do group like that to help the app's bundle is straightforward. When you open index.html, you will see we reference three files (
The bundle of build will be placed here - index.html, js, css and all assets.
In this structure, we are using modular pattern, so in each business domain we will create a module for it. For example, app module, home module and shop module. This pattern help us easy to scale the project.
In this setup, I implement compiling SASS to CSS when building the app. So you can use SASS or CSS up to you. You can find out more in the
config/webpack.common.js - module/rules.
Auto reload when changes in development
This is very convenient feature of Webpack. Whenever you changes the files, the app will reload with the latest update code. How cool, it's similar to
browsersync when we was using Gulp task runner.
Build for Development and Production modes
As I already said in this post, we have two mode of bundling the source code (build) with examples.
As default, with Prod mode, we ship the bundle with minified code so it will be lighter than in Dev mode. And also we add the hash to the bundle files to deal with browser cache.
To find out more, you can check the
webpack.prod.js to see the differences.
So, that's all for setting up Angular with Webpack project, again you can find source code in Github. Hope you enjoy it and let me know your feedback in comments.
In the next post, I will show you how to setup an Angular 4, ASP.NET Core project with Webpack 3 using hot module replacement.