jupl / wcb

Personal Webpack config builder

WCB _{Webpack Config builder}

About

Personal Webpack config builder, targeted specifically for TypeScript.

Installation

npm install typescript wcb webpack

Usage

import {addToEntries, createConfiguration} from 'wcb'
const base = createConfiguration()
const tweaked = createConfiguration({
  source: 'src',
  destination: 'dist',
  assets: 'assets',
})
const extra = addToEntries(createConfiguration({
  common: true,
  cssLoaders: [{test: /\.css$/, use: ['css-loader']],
}), [
  'dotenv/config',
])

// webpack.config.ts
import {createConfiguration} from 'wcb'
export default createConfiguration()

Environment Variables

The following environment variables are available for things like DCE:

process.env.IS_CLIENT

This is ~’true’~ if target is set to ~’web’~ or ~’webworker’~. Otherwise it is ~’false’~. Useful when using shared code.

process.env.NODE_ENV

This is read from the environment variable value set. Otherwise it is undefined.

process.env.WEBPACK_BUILD

This is always set to ~’true’~. This can be used for cases like when writing code for Node and run development code outside of Webpack.

API

createConfiguration(options?: Options): Configuration

Create a Webpack configuration which can be used by a webpack.config file.

addPlugins(configuration: Configuration, plugins: Plugin[]): Configuration

Given an existing configuration from createConfiguration, add Webpack plugins easily. Please note that this will return a new configuration and does not modify the given configuration.

addRules(configuration: Configuration, rules: Rule[]): Configuration

Given an existing configuration from createConfiguration, add Webpack rules for loaders easily. Please note that this will return a new configuration and does not modify the given configuration.

addToEntries(configuration: Configuration, modules: string[]): Configuration

Given an existing configuration from createConfiguration, load additional Node files to each entry. Please note that this will return a new configuration and does not modify the given configuration.

Options

assets: string | boolean = false

Path that contains static files to copy over to the final build. Path is relative to process.cwd(). The following occurs in order from top to bottom:

• If a custom string, that path is used
• If true then path from source is used
  • Source files that are built are ignored
• If false no static files are copied over

assetsIgnore: string[] = pattern

Glob patterns indicating files to ignore when using the assets option. By default it uses the pattern option.

chunkFilename: string = filename

Output chunk filename structure for JS/CSS. This is useful for caching strategies. DO NOT INCLUDE FILE EXTENSION.

common: string | boolean = false

If enabled and split is not enabled then a single file containing common code across multiple entry points will be included. This option is only use if a non-Node target is chosen and there are multiple entries to build. If value is true then name of file is called “common”, whereas a string value allows a custom filename.

cssLoaders: Loader[] = []

List of CSS loaders to incorporate. extract-text-webpack-plugin is used by default, whereas style-loader is used for hot reloading. Do NOT use extract-text-webpack-plugin nor style-loader as it will automatically be included.

destination: string = process.cwd()

Path where generated JS files will be placed in final build. If path is relative, it is relative to process.cwd().

devServer: boolean = false

If enabled then configuration will include support for Webpack DevServer.

environment: 'development' | 'production' = process.env.NODE_ENV

Environment to build under.

~filename: string = ‘[name]’~

Output bundle filename structure for JS/CSS. This is useful for caching strategies. DO NOT INCLUDE FILE EXTENSION.

html: boolean | string | object = false

If non-false, then use HTML Webpack Plugin to generate HTML files for each file from source. If an object is provided, then you can overwrite options. If a string then it is used as the template option in the plugin.

~hotReload: boolean = process.env.HOT_MODULES === ‘true’~

If enabled then Webpack hot reloading will be enabled. If using webpack-dev-server then use the server option. Otherwise if using webpack-dev-middleware or similar then use the middleware option.

log?: string | boolean

If value is a string, then logging is done with the string value used as an identifier.

pattern: string[] = ['**/*.ts{,x}']

Glob patterns to pick up as entry points relative to source. If you want to use JavaScript as entry points then instead of ts{,x} use {j,t}s{,x}.

source: string = process.cwd()

Path where source files will be used for building. If path is relative, it is relative to process.cwd().

split: boolean = false

If true then split code as outlined here.

sourceMaps?: Devtool

Webpack devtool option for source maps. By default the following occurs in order from top to bottom:

• If environment is ~’production’~ then false
• If hot reload is true then ~’cheap-module-eval-source-map’~
• Otherwise then ~’source-map’~

~target: string = ‘web’~

Webpack targets to build to.

typescript?: object | true

If true or passed with options, include awesome-typescript-loader.

paths: boolean = false

If true then add support for paths option in tsconfig via tsconfig-paths-webpack-plugin.

webpack?: object

Webpack configuration options to start out with. This is an advanced option. Take care in which options are specified as this builder can override overlapping settings.