js-config-webpack-plugin

Creating a webpack loader configurations can be quite time consuming.
The js-config-webpack-plugin is part of the common-config-webpack-plugin suite which tries to provide best practices for the most common loader requirements.

If no mode is explicitly set for the plugin the configuration will adjust depending on your webpack mode setting.

⚙️development mode webpack.config.js ⚙️production mode webpack.config.js

Installation

npm i --save-dev js-config-webpack-plugin

Webpack Config

In most projects you will need to set up project specific options but you can still use all or some common-config-webpack-plugin parts.

const JsConfigWebpackPlugin = require('js-config-webpack-plugin');
module.exports = {
  plugins: [new JsConfigWebpackPlugin()],
};

.babelrc

By default the js-config-webpack-plugin has defined a base .babelrc file which contains options for the babel compiler. If babel should use a specific .babelrc file, it's possible to pass the option babelConfigFile with the filepath to the correct .babelrc file.

• babelConfigFile: Default undefined, a .babelrc file relative to the context is searched. If no option file is found the base file .babelrc.base.json will be taken. When option contains a filepath, the configurations from the specified file will be used.

const JsConfigWebpackPlugin = require('js-config-webpack-plugin');
module.exports = {
  plugins: [
    new JsConfigWebpackPlugin({
      babelConfigFile: '/foo/bar/.babelrc',
    }),
  ],
};