webpack-config-plugins

by namics

Provide best practices for webpack loader configurations

496 Stars 24 Forks Last release: Not found MIT License 212 Commits 20 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:





NPM version Travis Appveyor lerna

License Commitizen friendly Prettier

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, css, 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

Demo

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

Demo

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)

NPM version Travis

🗒️

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)

NPM version Travis

🗒️

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)

NPM version Travis

🗒️

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)

NPM version Travis

🗒️

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)

NPM version Travis

🗒️

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)

NPM version Travis

🗒️

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.