webpack-config
Helps to load, extend and merge webpack configs
Installation
npm install webpack-config --save-devor
yarn add webpack-config --devFeatures
-
#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
Changelog
Details changes for each release are documented in the release notes and also in the wiki page.
Shareable Configs
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.
Usage
./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
}
})
]
});