Epeli's Webpack configuration

I love the idea of React Create App but I've never been able to use it due to lack of its customization possibilities but I've never had too much trouble configuring Webpack neighter. It's just a lots of stuff to remember and I'm lazy.

So instead of writing some personal notes I've created this tiny tool which generates Webpack (and Babel) configuration. It's my "personal React Create App" if you will.

Usage

npm install @epeli/webpack-config

and in webpack.config.js

const {createWebpackConfig} = require("@epeli/webpack-config");
module.exports = createWebpackConfig();

Defaults

By default it reads an entry point from ./src/index. The index file can be index.js,index.jsx,index.ts, or index.tsx. Production bundle is written to ./dist/main.js.

The default Babel configuration has react, typescript and env presets.

It also adds the class properties and dynamic import proposal plugins and Emotion plugin with source maps.

Enables .mjs based tree shaking for some npm modules (ex. react-icons).

In development when using --hot with the webpack-dev-server React Hot Loader Babel plugin is activated automatically.

Options

You can configure the configuration. Yeah known! But I think it's actually a good thing because now this tool that I know well abstracts mostly Webpack from my projects. Which means that if Webpack changes its configuration syntax or adds a feature I want to enable in my projects I can just adjust this tool and update my project deps of this.

entry: mixed

This option is passed directly to the Wepback entry option.

babelEnv: mixed

This option is passed directly to @babel/preset-env options

extractCommons: boolean

If you have added multiple entry points using the entry option you can set this to true to enable creation of an additional bundle which includes all the common code between the entry points.

It will be written to ./dist/commons.js.

hashFilenames: boolean

Add a hash to the generated bundle filenames.

hotCors: boolean

If you are using React Hot Loader this options makes it work cross domains by adding the required CORS headers. Ex. you can run your webserver from a virtual server / container / remote server / whatever and serve hot javascript bundles from localhost.

historyApiFallback: boolean | mixed

Enable history fallback if you want to use React Router with the HTML 5 History API. This is passed directly to devServer.historyApiFallback

babelPlugins: (string | [string, any] | Function)[]

List of custom babel plugins to enable.

You can also pass a function which is called with {mode: "production" | "development"} which allows different configurations for production and development.

Ex.

module.exports = createWebpackConfig({
    babelPlugins: [
        args => {
            if (args.mode === "production") {
                return "emotion";
            }

            return [
                "emotion",
                {
                    sourceMap: true,
                    autoLabel: true,
                    labelFormat: "[filename]--[local]",
                },
            ];
        },
    ],
});

template: string

This is the most custom part of this lib. It takes a path to a template file which is processed with Lodash templates. The end result is written to ./dist.

Inside the template following functions are available:

• renderHash(chunkName) render content hash of the chunk
• renderScriptTag(chunkName) render script tag for chunk
• renderHashedChunk(chunkName) render chunk name with hash query (ex. main.js?v=1234)

The chunkName can be the entry name (ex. main) or the extracted bundle name commons.

CSS

CSS files can be imported using the ES import syntax.

Babel customization

You can customize the env-preset with .browserlistrc file.

When required you can completely customize the Babel configuration by creating your own babel.config.js, .babelrc.js or .baberc file.

process.env.NODE_ENV is exposed to Javascript based Babel config files based on the Webpack --mode argument.

Full customization

The full generated Webpack configuration can be customized with the customizer callback:

module.exports = createWebpackConfig(options, config => {
    config.entry.myExtraEntry = "./src/other.js";
});

Webpack Bundle Analyzer

Can be activated with an ANALYZE environment variable

ANALYZE=1 webpack --mode production