@enmove/conf-gen-webpack

A webpack configuration generator for web and electron applications.

Features

• TypeScript loader
• css-module support
• SASS support with TS declaration generation (by typings-for-css-modules-loader)
• Compatible with webpack-dev-server
• Automatically generates vendor.js along with your bundled js file

Usage

In your webpack.config.js file, import this module so you can get a function that returns a function, not a function that returns a webpack config object. Then call it by passing your package root directory, which is typically described as __dirname since your webpack.config.js file lives on the package root directory. Finally, export the return value of the function as if it is the webpack configuration object.

NOTE: This module requires the access to the mode variable that represents which webpack mode (like --mode=production and --mode=development) is currently used. Therefore, it returns a function rather than plain JS object.

module.exports = require("@enmove/conf-gen-webpack")(__dirname);

If you want to build an electron renderer with this, specify target options in addition:

module.exports = require("@enmove/conf-gen-webpack")(__dirname, {
    target: "electron-renderer"
});

In that case you need to modify the configuration object generated by this function, you have to wrap the function with a new function so it can pass the parameters the generator function requires:

const genWebpackConf = require("@enmove/conf-gen-webpack");

module.exports = (...args) => {
    // Generate the config
    const config = genWebpackConf(__dirname)(...args);

    // Modify the config in your own way
    config.devtool = "eval";

    // Return the config
    return config;
};

Project structure

This webpack config infers that your project structure is following:

my-project
├── dist
│   ├── (bundle.js + .map)
│   ├── (index.html)
│   ├── (main.css + .map)
│   └── (vendor.js)
├── src
│   ├── index.html  // The html template
│   ├── index.tsx   // The entry file
│   └── ...
├── static
│   └── ...
├── package.json
├── tsconfig.json
└── webpack.config.js

API

getWebpackConf(rootDir, config?)

Returns a function that returns a webpack configuration object.

getWebpackConf(rootDir: string, config?: Config) => WebpackConfigFunc;

// WHERE:
type Config = {
    target?: "web" | "electron-renderer",
    vendor?: {
        exclude?: string[],
        include?: string[],
    },
}

type WebpackConfigFunc = (env: any, argv: any) => webpack.Configuration;

This function accepts some configuration as the second argument to tweak the generated config object for your needs.

Key	Type	Default	Description
target	`"web"	"electron-renderer"`	"web"
vendor.include	string[]	[]	A set of modules that should be bundled into vendor.js.
vendor.exclude	string[]	[]	A set of modules that should not be bundled into vendor.js.

config.target

Specifies the webpack target from web (default) or electron-renderer. Useful when you are bundling your electron application.

module.exports = require("@enmove/conf-gen-webpack")(__dirname, {
    target: "electron-renderer"
});

config.vendor

This package extracts the list of packages that are used in the application from the dependencies field in your package.json, and generates vendor.js that contains the bundled code those are unlikely changed because they are external modules.

In the case you need to customize the list of modules that should be bundled in the separeted js file, provide exclude and/or include list, or you can just convert your dependencies into devDependencies so modules in dev dependencies are not bundled in vendor.js or vice versa.

module.exports = require("@enmove/conf-gen-webpack")(__dirname, {
    vendor: {
        exclude: ["bootstrap"]
    }
});

Additional info

This package is included in:

• for-electron
• for-web