@enmove/conf-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 for external packages, which is barely changed

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

Usage

There are two ways to use this module to create a webpack configuration object:

• Import a config object from either web or electron directory (recommended)
• Import a config builder function and call it with options

Import a config object

Importing a config object in your webpack.config.js is the easiest way to use this module.

In your webpack.config.js, import one of presets and export it:

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

Notice the /web sub-directory. You have to specify the target of your application to load a webpack config.

If you want to create a webpack config for an electron app (precisely, an electron renderer), import it from electron directory rather than web:

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

Configs for production and development

Some of the attributes in the webpack config may change in response to the webpack mode. For example. those webpack plugins related to hot-reloading should be removed in production mode.

@enmove/conf-webpack automatically detect the current webpack mode by reading the argument that is passed to run webpack. So, we strongly recommend you to call webpack with either --mode=production or --mode=development.

// In package.json
{
    "scripts": {
        "webpack": "webpack --mode production",
        "webpack:dev": "webpack-dev-server --mode development"
    }
}

Sometimes, you want to separate webpack.config.js into multiple profiles like webpack.prod.config.js, and webpack.dev.config.js. In that case, you probably want to avoid auto-detection of the webpack mode by explicitly specifying it.

To do this, import the config from either <target>/prod or <target>/dev like this:

// In `webpack.production.config.js`:
module.exports = require("@enmove/conf-webpack/prod");

// In `webpack.development.config.js`:
module.exports = require("@enmove/conf-webpack/dev");

Customize a webpack config

Since it returns a webpack config object, you can customize it by modifying the returned object:

const config = require("@enmove/conf-webpack/web");

// Modify the config
config.devtool = "eval";

// Don't forget exporting the config
module.exports = config;

Import a config builder function

In the cases where you want to tweak the webpack config generated by this module, use a config builder function instead of the preset configs.

To use the config builder function, import it from exactly @enmove/conf-webpack:

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

// It returns a webpack configuration object
module.exports = generateWebpackConfig({
    // ...options
});

API

Presets

@enmove/conf-webpack provides following presets:

• @enmove/conf-webpack/web
• @enmove/conf-webpack/web/prod
• @enmove/conf-webpack/web/dev
• @enmove/conf-webpack/electron
• @enmove/conf-webpack/electron/prod
• @enmove/conf-webpack/electron/dev

In addition, @enmove/conf-webpack exports the webpack config builder called generateWebpackConfig function.

generateWebpackConfig(config?)

Returns a webpack configuration object.

generateWebpackConfig(config?: Config) => WebpackConfiguration;

Use this function rather than preset configurations to tweak the generated config object for your needs.

All of the attributes in config are optional.

| Key | Type | Default | Description | |------------------|-------------------------------|------------------------------|---------------------------------------------------------------| | rootDir | string | process.cwd() | The project root directory. | | isDev | boolean | Detected from process.argv | Indicates whether the webpack mode is "development" or not. | | target | "web" | "electron-renderer" | "web" | Indicates which platform your app targets. | | 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-webpack")({
    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-webpack")({
    vendor: {
        exclude: ["bootstrap"]
    }
});

Additional info

This package is included in:

• for-electron
• for-web