#+HTML: WCB Webpack Config builder [[https://www.npmjs.org/package/wcb][file:https://img.shields.io/npm/v/wcb.svg?style=flat-square]] [[https://travis-ci.org/jupl/wcb][file:https://img.shields.io/travis/jupl/wcb.svg?label=travis&style=flat-square]] [[https://codecov.io/gh/jupl/wcb][file:https://img.shields.io/codecov/c/github/jupl/wcb.svg?style=flat-square]] [[https://david-dm.org/jupl/wcb][file:https://img.shields.io/david/jupl/wcb.svg?style=flat-square]] [[https://david-dm.org/jupl/wcb?type=peer][file:https://img.shields.io/david/peer/jupl/wcb.svg?style=flat-square]] [[https://david-dm.org/jupl/wcb?type=dev][file:https://img.shields.io/david/dev/jupl/wcb.svg?style=flat-square]]

** About Personal [[https://webpack.js.org/][Webpack]] config builder, targeted specifically for [[https://www.typescriptlang.org/][TypeScript]].

** Installation #+BEGIN_EXAMPLE npm install typescript wcb webpack #+END_EXAMPLE

** Usage #+BEGIN_SRC typescript 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() #+END_SRC

** 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 [[https://webpack.js.org/concepts/configuration/][Webpack configuration]] which can be used by a =webpack.config= file. *** ~addPlugins(configuration: Configuration, plugins: Plugin[]): Configuration~ Given an existing configuration from ~createConfiguration~, add [[https://webpack.js.org/concepts/plugins/][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 [[https://webpack.js.org/concepts/loaders/][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~ [[https://webpack.js.org/configuration/output/#output-chunkfilename][Output chunk filename structure]] for JS/CSS. This is useful for [[https://webpack.js.org/guides/caching/][caching]] strategies. DO NOT INCLUDE FILE EXTENSION. *** ~common: string | boolean = false~ If enabled and ~split~ is not enabled then a single file containing [[https://webpack.js.org/plugins/commons-chunk-plugin/][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 [[https://webpack.js.org/configuration/module/#rule][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 [[https://webpack.js.org/configuration/dev-server/][Webpack DevServer]]. *** ~environment: 'development' | 'production' = process.env.NODE_ENV~ Environment to build under. *** ~filename: string = '[name]'~ [[https://webpack.js.org/configuration/output/#output-filename][Output bundle filename structure]] for JS/CSS. This is useful for [[https://webpack.js.org/guides/caching/][caching]] strategies. DO NOT INCLUDE FILE EXTENSION. *** ~html: boolean | string | object = false~ If non-false, then use [[https://github.com/jantimon/html-webpack-plugin][HTML Webpack Plugin]] to generate HTML files for each file from ~source~. If an object is provided, then you can overwrite [[https://github.com/jantimon/html-webpack-plugin#options][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 [[https://webpack.js.org/concepts/hot-module-replacement/][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 [[https://hackernoon.com/f8a9df5b7758][here]]. *** ~sourceMaps?: Devtool~ [[https://webpack.js.org/configuration/devtool/#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'~ [[https://webpack.js.org/configuration/target/][Webpack targets]] to build to. *** ~typescript?: object | true~ If true or passed with options, include [[https://github.com/s-panferov/awesome-typescript-loader][awesome-typescript-loader]]. *** ~paths: boolean = false~ If true then add support for paths option in tsconfig via [[https://github.com/dividab/tsconfig-paths-webpack-plugin][tsconfig-paths-webpack-plugin]]. *** ~webpack?: object~ [[https://webpack.js.org/configuration/#options][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.