Provide best practices for webpack loader configurations
Clone or download
Latest commit 7c9cec9 Jan 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github feat(github): add issue and pull request templates Jun 29, 2018
cli v1.3.3 Jan 20, 2019
packages v1.3.1 Jan 20, 2019
performance chore: Use cpuprofile-webpack-plugin Jan 18, 2019
webpage fix(webpack-dev-server): vulnerability CVE-2018-14732 Jan 7, 2019
.editorconfig chore(editorconfig): add namics default editorconfig Jun 28, 2018
.gitignore docs(cli): Add additional getting started information Jan 20, 2019
.node-version chore: update to webpack compatible node version (and newest npm vers… Nov 22, 2018
.npm-version chore: update to webpack compatible node version (and newest npm vers… Nov 22, 2018
.npmrc chore: Do not generate package-locks and ignore them in git config Dec 27, 2018
.nvmrc chore: update to webpack compatible node version (and newest npm vers… Nov 22, 2018
.prettierignore docs(cli): Add additional getting started information Jan 20, 2019
.prettierrc.js chore: improve prettier config Nov 22, 2018
.travis.yml ci: test latest Node.js Jan 18, 2019
CHANGELOG.md v1.3.3 Jan 20, 2019
LICENSE docs: Add MIT License Aug 13, 2018
README.md docs(cli): Add additional getting started information Jan 20, 2019
appveyor.yml ci: Reworked travis and appveyor config Aug 10, 2018
lerna.json v1.3.3 Jan 20, 2019
logo.png docs: Add logo Jun 28, 2018
package.json ci: Split bootstrap from postinstall Jan 9, 2019
plug.png docs: add plug logo for document-header Sep 7, 2018
preview-dev-server.gif chore: Rename preview video Sep 12, 2018
preview.gif docs: update preview movie Sep 12, 2018
tsconfig.json perf: Add performance measurements Dec 20, 2018

README.md





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.