I assume you’ve already known what is Webpack, why it’s awesome and how it works, so let’s start:
Probably, you aware of such commonly used tools for Webpack like: style-loader, html-webpack-plugin, extract-text-webpack-plugin, file-loader and other popular stuff.
1. Offline-plugin
Offline plugin (ServiceWorker, AppCache) for webpack
From official description:
This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your webpack.config, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets.
NekR/offline-plugin_offline-plugin - Offline plugin (ServiceWorker, AppCache) for webpack (http://webpack.github.io/)_github.com
2. Preload-webpack-plugin
GoogleChrome/preload-webpack-plugin_preload-webpack-plugin - A Webpack plugin for wiring up ` ` (and prefetch) - supports async chunks_github.com
A Webpack plugin for wiring up `<link rel=’preload’>` (and prefetch) — supports async chunks
From official description:
A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading.
3. Webpack-manifest-loader
Webpack plugin for generating asset manifests
Automatically generates manifest.json for your app.
danethurber/webpack-manifest-plugin_webpack-manifest-plugin - webpack plugin for generating asset manifests_github.com
4. PurifyCSS-webpack
Remove unused CSS with webpack
Probably, you don’t want to include unused CSS in your production build, and that’s where Purify-CSS comes. This webpack loader aims to remove unused css selectors.
Note: You should use it with the extract-text-webpack-plugin.
webpack-contrib/purifycss-webpack_purifycss-webpack - Remove unused CSS with webpack_github.com
5. Copy-webpack-plugin
This is a webpack plugin that copies individual files or entire directories to the build directory.
kevlened/copy-webpack-plugin_copy-webpack-plugin - Copy files and directories in webpack_github.com
Simple plugin, that allows you to copy files/directories.
Common use-case is to copy your static files (media, images) into dist folder:
new CopyWebpackPlugin([{from: _.cwd('./static'),// to the root of the dist pathto: './'}])
6. Isomorphic-style-loader
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
kriasoft/isomorphic-style-loader_isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps_github.com
From official docs:
An alternative CSS style loader, which works similarly to style-loader, but is optimized for isomorphic apps. In addition to what style-loader provides, it allow to render critical path CSS during server-side rendering (SSR), by adding two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns CSS string).
7. Eslint-loader
eslint loader (for webpack)
MoOx/eslint-loader_eslint-loader - eslint loader (for webpack)_github.com
Loader, Eslint-loader. Do you know about eslint fix option? With this option your code will be automagically formatted by eslint.
How to build app with all these plugins and loaders? Just take a look at this example.
Github: https://github.com/MetnewTwitter: https://twitter.com/coldlinecall