Since Angular 7, project is configured through angular.json file. But you maybe want to use Webpack plugins in your project. There is the solution !

Angular is based on Webpack to build the app. However, since Angular 7, the Angular CLI use angular.json file for build requests. Webpack is not longer available for customized plugins import.

But the is a solution to override the native build requests of Angular: Angular Builders.

@just-jeb was developped a builder to use the Webpack features in the App.

So, execute the following command :

npm i -D @angular-builders/custom-webpack

Then, in the file angular.json :

"architect": {
    ...
    "build": {
              "builder": "@angular-builders/custom-webpack:browser"
              "options": {
                     "customWebpackConfig": {
                        "path": "./webpack-extra.config.js"
                     }
                     ...
              }
              ...
    "serve": {
              "builder": "@angular-builders/custom-webpack:dev-server"
              "options": {
                     "customWebpackConfig": {
                        "path": "./webpack-extra.config.js"
                     }
                     ...
              }

In the file webpack-extra.config.js :

console.log('custom webpack config OK');
module.exports = {
  plugins: [
  ]
};

Now, you can check that all works correctly with ng build and ng serve.

Ng Build

NB: The configurations browser, server, karma and dev-server are managed by the builder Custom Webpack

Moreover

You have set-up Webpack in Angular but what is the result?

To check the integration, the plugin InjectPlugin can be used.

Execute the following command:

npm i  npm install webpack-inject-plugin

Then, in the file webpack-extra.json :

const InjectPlugin = require('webpack-inject-plugin').default;

module.exports = {
  plugins: [
    new InjectPlugin(function () {
      return "console.log('InjectPlugin OK !');"
    })
  ]
};

Execute the command:

ng serve

And check in the console the following message InjectPlugin OK !.

Inject Plugin

This plugin allow you to inject code to each chunk build.

Hope this article has been useful for you. xD

See you in the next article. ;)


Liens utiles :

Previous Post Next Post


Add a comment