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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent