webpack-config-addons
A webpack utility for composing addon configurations for creating config presets by leveraging webpack merge and functional composition
Prerequisites
-
Addon config files must be in a folder named
addons
relative towebpack.config.js
path -
Addon name must be passed in as webpack-cli argument --env.addons=exampleaddon
-
Addon files must be named in the follow the format of
webpack.${addonName}.js
. For example, if you want to create a preset for typescript loader you can name your addontypescript
, then name of the addon file should bewebpack.typescript.js
and webpack should be passed in --env.addon=typescript -
Addon configs must be a commonJS module that returns a function which takes webpack env as and argument and returns a config object (see examples in usage)
Usage
Get addon configs from addons folder relative to webpack.config.js
// project rootproject/├── addons/│ ├── webpackhtmljs│ └── webpackjarvisjs├── webpackconfigjs
# run webpack with --env flag and pass addon names$ npx webpack --env.addons=html --env.addons=jarvis
// webpack.config.js const getAddons = ;const webpackMerge = ; module { const addonsConfig = ; const config = entry: 'src/index.js' ... ; const mergedConfig = ; return mergedConfig;}; /** merged config : { entry: 'src/index.js', ... plugins: [ new HtmlWebpackPlugin({ template: 'src/index.ejs', inject: false, hash: true, filename: `index.html` }), new Jarvis({ port: 9090 // optional: set a port }) ]} */ // webpack.html.js const HtmlWebpackPlugin = ; module plugins: template: 'src/index.ejs' inject: false hash: true filename: `index.html` ; //webpack.jarvis.js const Jarvis = ; module plugins: port: 9090 // optional: set a port ;
License
MIT © Nivrith Mandayam Gomatam