fabernovel loader

Oct 20, 2017 | 3 min read

Tech

How to set up Webpack in an Angular project?

Emilie Paillous

Developer


FABERNOVEL TECHNOLOGIES
In order to structure the basis of our application, we took the tutorial offered by Angular (we were at the time on the Angular 2 version, the tutorial is now about Angular 4), and we relied greatly on the setup proposed in the Webpack section.

Subsequently, we tried to integrate angular-cli to the project, but it is still impossible to use a custom webpack setup with angular-cli, which is a pretty blocking point. Here are the reasons that led us to customize the webpack setup, compared to the one put forward by the tutorial:

SASS       

The use of SASS was quickly obvious, since it allows, among other things, storing all the colors used in one single place, and thus to be able to easily change them. This is not shown in the tutorial, so we added the SASS loader that enables to compile easily from SASS to CSS. Thereafter, we kept the structure proposed by the tutorial, that is to say a global-style file (styles.scss) regrouping the styles used everywhere within the application, and a component-style file, which is loaded inline if the associated component is used in the page.

 

SVG files

We use SVG files for all the images in the application. These assets are stored in a single public file, and then referenced in the different templates. Using the inline-svg package, they are inline inside the html, which then allows to override the properties of the image, such as color, edge size, and so on.

It should be emphasized that it is not currently possible to reference the address of an SVG file in an application model. For instance, we wanted to reference a specific pictogram according to the class of our object (for example, an iconUrl() method that would return the corresponding SVG address), but the file address refers to the model and not the component that uses it, and webpack does not offer a solution to this issue. The solution currently implemented is to have a « pictogram » component taking as input a pictogram type, and displaying the correct SVG according to the requested type of pictogram.

 

The environment variables

In our application, we use several parallel tagging systems requiring the addition of javascript in the <head> tag of the html page. We use environment variables to distinguish the data returned by the development, preproduction and production environment. When building the application, we use the environment-friendly Json file, listing the key-value ensemble of the environment variables. In addition to the webpack plugin already provided for this purpose (EnvironmentPlugin), we use a simple loader of string replace to replace the corresponding variables in the index.html file.

 

Several Webpack setup files

At this time, we have 4 files allowing us the total setup of Webpack:

  • A local setup file, identical to the one proposed by the tutorial.
  • A test setup file, also identical to the one proposed by the tutorial (in particular replacing style files and null images with the null-loader)
  • A production setup file, in which we are replacing the environment variables referenced in the index.html file, and in which we are using the AoT plugin allowing Ahead Of Time compilation in production only.
  • A common file to the production and local setup containing common loaders (style, html, file, etc.).

 

You will find below the links to our different files:

webpack.common.js

webpack.local.js

webpack.prod.js

webpack.test.js

It is important to notice (in the webpack.prod.js file) the order in which the different setups are merged: the AoT plug-in must be used first before any other setup. Thus, webpackMerge takes three arguments: a first setup containing only the AOT plug-in, a second setup common to the production and the local development, then the setup specific to the production.

Do you have any questions about the webpack setup ?

Contact Emilie
This article belongs to a story
logo business unit

FABERNOVEL TECHNOLOGIES

150 talents to face technological challenges of digital transformation

next read