Customize Webpack configuration

Roadmap Card

Description

We want to allow users to extend the Webpack configuration.

User Stories

As a Frontity developer
I want to customize the default Webpack configuration
so that I can use change the default configuration and add additional features

Possible solution

Use the frontity.config.js file where you can export a function that receives the current Webpack config object.

In Frotity, we have 3 different configs, one for the server, another for the es5 bundles and another for the es6 (“module”) bundles.

This function will be run 3 times, one for each target.

export const webpack = ({ config, mode, target }) => {
  // Change the publicPath.
  config.output.publicPath = "https://mycdn.com/";

  // Add support for a new file type.
  config.modules.rules.push({
    test: /\.ext$/,
    loader: "some-loader"
  });

  // Change devtool option for development mode.
  if (mode === "development") {
    config.devtool = "cheap-eval-source-map";
  }

  // Add an alias for the server.
  if (target === "server") {
    config.resolve.alias["some-package"] = "other-package";
  }

  // Add an external for the client (both es5 and module).
  if (target === "es5" || target === "module") {
    config.externals["some-package"] = "window.variable";
  }
};

We should allow for frontity.config.js files in:

  • The root folder of the project: People can add configuration specific to their project.
  • Inside packages: Package developers can add configuration specific to their packages.

@mmczaplinski opened another FD but Babel configuration instead of Babel: Customize Babel configuration

Babel and Webpack configuration are generated exactly in the same way, so we should be able to add both features at the same time.

Let’s keep the conversation in this one.