SPFx - decoding webpack build

Webpack

Webpack is a great module bundler that makes developers life easy. Separating code in different modules makes it easy to understand and maintain large application code. Developers who have experience with server side development with SharePoint will know SharePoint Solution file aka wsp that is generated for the build. This is a single file that will generated as output of build process. Your wsp file has all the details related to Features, Webparts, Master Pages and all the assets that wish to deploy.

You can somewhat related module bundler like webpack to this build in packaging process of MSBuild in Visual Studio. Since SPFx solutions are client side, they will mainly have HTML,CSS, JavaScript, Images as assets. Webpack providers easy module bundling for all these types of assets. If you see Nodejs projects that uses webpack, it will have webpack.config.js which is the configuration file for webpack. But wait a minute, when I scaffold a new SPFx webpart project I do not see this file?

Webpack configuration for SPFx

As build process is standardized for SPFx webpart development, you might have guessed by now that webpack details have been abstracted away from developer. Each SPFx project will use same webpack configuration that is standardized for SPFx solutions module bundling project. If you want to see default webpack configuration for SPFx project, you can navigate to SolutionFolder/node_modules/@microsoft/gulp-core-build-webpack and here you will see webpack.config.js that is standardized as a part of node module dependency for SPFx projects.

Extending webpack

If you ever find in a situation where you need to extend webpack obviously you are not going to edit this default configuration file for webpack directly. There is a cleaner way to achieve this. This can be done in gulp file. The default gulp file for SPFx will have below configuration:

'use strict';

const gulp = require('gulp');  
const build = require('@microsoft/sp-build-web');

build.initialize(gulp);


Here, build is defining all the build tasks and pipeline that needs to be performed and build.initialize() is where we are actually initializing it. We can extend webpack by adding our own configuration just before we initialize build. To add webpack config, we will have to use build.configureWebpack.mergeConfig()
We will only push the loader config onto the list of existing loaders in the toolchain. Lets see how we can add babel-loader to our SPFx solution. Config to add babel-loader after installing from loader documentation is:

module: {  
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

This is fairly simple configuration to understand. Important settings are:
test : specifies regular expression for checking on which files we want our loader to operate.
exclude: Exclude these files or folder
loader: loader that we want to use of files matching test condition.

This loader configuration will translate as below for our SPFx solution:

build.configureWebpack.mergeConfig({  
    additionalConfiguration: (webpackConfig) => {
        webpackConfig.module.loaders.push([{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: "babel-loader"
        }
        ]);
        return webpackConfig;
    }
});

Make sure that this code is added before build.initialize(gulp)

Comments

comments powered by Disqus