isabella232 / webpack-config-plugins

Provide best practices for webpack loader configurations

Pluggable webpack configurations

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.

Quick overview

npx generate-webpack-config

Alternatively you can also use the online config tool to get started.

Zero Config example

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

Webpack Config

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

Use them all

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(),
  ],
};

Use only javascript (.js & .jsx & .mjs)

🗒️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()],
};

Use only typescript (.ts & .tsx)

🗒️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()],
};

Use only styles (.css & .scss)

🗒️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()],
};

Use only assets (Font & Images)

🗒️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()],
};

Use only fonts (.woff & .woff2)

🗒️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()],
};

Use only images (.gif & .jpg & .jpeg & .png & .svg)

🗒️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()],
};

Quality checks

The common-config-webpack-plugin suite provides typechecks and integration tests for the loader configurations for Windows and Unix.

Peer dependencies

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.

License

The common-config-webpack-plugin is MIT licensed.