![](https://github.com/merkle-open/webpack-config-plugins/raw/master/logo.png)
![](https://github.com/merkle-open/webpack-config-plugins/raw/master/plug.png)
Creating webpack loader configurations can be quite time consuming.
This project tries to provide best practices for the most common loader requirements: ts
, js
, scss
, fonts
and images
.
Instead of copying loader configs from github and stackoverflow you could just add one of the following plugins.
The compatible version of webpack to each plugin may vary and is documented in each package.json
file under the peerDependencies
property.
npx generate-webpack-config
Alternatively you can also use the online config tool to get started.
Webpack itself provides many defaults so you are able to run the common-config-webpack-plugin
without a webpack.config file:
npm i --save-dev webpack webpack-cli common-config-webpack-plugin
npx webpack --plugin common-config-webpack-plugin
Zero Config webpack-dev-server example
You can even setup an entire development server without configuration:
npm i --save-dev webpack common-config-webpack-plugin html-webpack-plugin
webpack-dev-server --plugin common-config-webpack-plugin --plugin html-webpack-plugin
Many projects will need some project specific options. The common-config-webpack-plugin
suite is designed to be plugable so you will be able to pick only what you need and combine it with your configuration. By default the plugin configuration will adjust depending on your webpack mode setting.
common-config-webpack-plugin
├── js-config-webpack-plugin
├── ts-config-webpack-plugin
├── scss-config-webpack-plugin
└── asset-config-webpack-plugin
├── font-config-webpack-plugin
└── image-config-webpack-plugin
To get started you can just add all common-config-webpack-plugin
parts at once.
const CommonConfigWebpackPlugin = require('common-config-webpack-plugin');
module.exports = {
plugins: [new CommonConfigWebpackPlugin()],
};
Which would be exactly the same as
const JsConfigWebpackPlugin = require('js-config-webpack-plugin');
const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
const FontConfigWebpackPlugin = require('font-config-webpack-plugin');
const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');
module.exports = {
plugins: [
new JsConfigWebpackPlugin(),
new TsConfigWebpackPlugin(),
new ScssConfigWebpackPlugin(),
new FontConfigWebpackPlugin(),
new ImageConfigWebpackPlugin(),
],
};
🗒️js-config-webpack-plugin
Readme
⚙️development webpack.config.js
⚙️production webpack.config.js
The js-config-webpack-plugin
is a modified version of the create-react-app best practices.
By default the plugin configuration will adjust depending on your webpack mode setting.
const JsConfigWebpackPlugin = require('js-config-webpack-plugin');
module.exports = {
plugins: [new JsConfigWebpackPlugin()],
};
🗒️ts-config-webpack-plugin
Readme
⚙️development webpack.config.js
⚙️production webpack.config.js
The ts-config-webpack-plugin
is a modified version of the ts-loader best practices.
By default the plugin configuration will adjust depending on your webpack mode setting.
const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
module.exports = {
plugins: [new TsConfigWebpackPlugin()],
};
🗒️scss-config-webpack-plugin
Readme
⚙️development webpack.config.js
⚙️production webpack.config.js
The scss-config-webpack-plugin
is a modified version of the create-react-app best practices.
By default the plugin configuration will adjust depending on your webpack mode setting.
const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
module.exports = {
plugins: [new ScssConfigWebpackPlugin()],
};
🗒️asset-config-webpack-plugin
Readme
The asset-config-webpack-plugin
is just a wrapper around the font-config-webpack-plugin
and the image-config-webpack-plugin
.
const AssetConfigWebpackPlugin = require('asset-config-webpack-plugin');
module.exports = {
plugins: [new AssetConfigWebpackPlugin()],
};
🗒️font-config-webpack-plugin
Readme
⚙️development webpack.config.js
⚙️production webpack.config.js
The font-config-webpack-plugin
will allow you to use woff-fonts.
const FontConfigWebpackPlugin = require('font-config-webpack-plugin');
module.exports = {
plugins: [new FontConfigWebpackPlugin()],
};
🗒️image-config-webpack-plugin
Readme
⚙️development webpack.config.js
⚙️production webpack.config.js
The image-config-webpack-plugin
will allow you to use images from within js and css files.
const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');
module.exports = {
plugins: [new ImageConfigWebpackPlugin()],
};
The common-config-webpack-plugin
suite provides typechecks and integration tests for the loader configurations for Windows and Unix.
The common-config-webpack-plugin
has a direct dependencies to babel and ts.
However if you need to pick a specific version you can use the js-config-webpack-plugin
or ts-config-webpack-plugin
which use peer-dependencies instead.
The common-config-webpack-plugin
is MIT licensed.