Helps to load, extend and merge webpack configs
npm install webpack-config --save-devor
yarn add webpack-config --dev-
#extend()- Helps to extend config using local file or shareable config -
#merge()- Helps to merge some values into config and overrides existing ones -
#defaults()- Helps to add some values if they are missing - Supports
environmentvariables under#extend(),#merge(),#defaults()methods - Supports
process.env.*variables in addition toenvironmentones - Supports shareable configs via
node-modules
Details changes for each release are documented in the release notes and also in the wiki page.
You can publish your configs to npm using webpack-config- prefix for package name.
When you call #extend() method you may omit that prefix:
import Config from "webpack-config"; export default new Config().extend( "mdreizin/base", "mdreizin/css", "mdreizin/html", "webpack-config-mdreizin/json" // etc );Also I would recommend to add webpack and webpack-config keywords so other users can easily find your module.
./webpack.config.js
import Config, { environment } from "webpack-config"; environment.setAll({ env: () => process.env.NODE_ENV }); // Also you may use `'conf/webpack.[NODE_ENV].config.js'` export default new Config().extend("conf/webpack.[env].config.js");./conf/webpack.base.config.js
import ExtractTextPlugin from "extract-text-webpack-plugin"; import Config from "webpack-config"; const extractCss = new ExtractTextPlugin("[name].css"); export default new Config().merge({ output: { filename: "[name].js" }, resolve: { root: [__dirname], modulesDirectories: ["node_modules"] }, plugins: [extractCss], module: { loaders: [ { test: /\.less$/, loader: extractCss.extract("style", ["css", "less"]) } ] } });./conf/webpack.development.config.js
import webpack from "webpack"; import Config from "webpack-config"; export default new Config().extend("conf/webpack.base.config.js").merge({ debug: true, devtool: "#source-map", output: { pathinfo: true }, entry: { app: ["src/index.js", "src/index.less"], vendor: ["lodash"] }, plugins: [new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js")] });./conf/webpack.production.config.js
import webpack from "webpack"; import Config from "webpack-config"; export default new Config() .extend({ "conf/webpack.development.config.js": config => { delete config.debug; delete config.devtool; delete config.output.pathinfo; return config; } }) .merge({ plugins: [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurrenceOrderPlugin(true), new webpack.optimize.UglifyJsPlugin({ mangle: true, output: { comments: false }, compress: { warnings: false } }) ] });