Customizing the Webpack Configuration

Even though the included webpack configuration will handle most cases, we also provide the ability to modify it.

Please note that the webpack configuration does not follow semantic versioning and can change with any release.

Use the webpack property of the configuration object to specify a function that receives the default webpack configuration along with some other information. This modifier function has to return the modified configuration.

/toolkit.config.js

module.exports = {    webpack(config, options) {        // ... do some modifications...
        return config    },    // ... other options ...}

The modifier function receives two arguments. First is our default webpack configuration, second is an object with additional information and utilities, following this interface:

interface Options {    /**     * The webpack module. To avoid version conflicts, you should not import     * webpack on your own if you want to use one of the built-in plugins.     */    webpack: webpack
    /**     * A boolean that specifies wether the configuration is for development or     * production.     */    dev: boolean
    /**     * Specifies if the current build is for client or server     */    target: "client" | "server"}

If you find yourself modifying the webpack configuration often for a feature that you think belongs in our default config, please open an issue to discuss it.

Examples

⚠️ Below examples are not updated for v3 yet.

Adding a Babel Plugin

This example shows how to add @babel/plugin-proposal-pipeline-operator to babel-loader:

/toolkit.config.js

module.exports = {    webpack(config) {        const babelRule = config.module.rules.find(            (rule) => rule.use.loader && rule.use.loader.includes("babel-loader")        )
        if (!babelRule) return config
        const babelOptions = babelRule.use.options
        const pipelinePlugin = ["@babel/plugin-proposal-pipeline-operator", { proposal: "smart" }]
        if (Array.isArray(babelOptions.plugins)) {            babelOptions.plugins.push(pipelinePlugin)        } else {            babelOptions.plugins = [pipelinePlugin]        }
        return config    },}

Polyfilling a Node Module

This example shows how to polyfill the Node.js crypto module using a resolve fallback:

/toolkit.config.js

module.exports = {    webpack(config) {        config.resolve.fallback.crypto = require.resolve("crypto-browserify")
        return config    },}