Before you go, check out these stories!

Hackernoon logoWebpack loaders and plugins for your new Progressive Web App. by@vladimirmetnew

Webpack loaders and plugins for your new Progressive Web App.

Author profile picture

@vladimirmetnewVladimir Metnew

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.

2. Preload-webpack-plugin

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.

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.

5. Copy-webpack-plugin

This is a webpack plugin that copies individual files or entire directories to the build directory.

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 path
to: './'

6. Isomorphic-style-loader

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

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)

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.



The Noonification banner

Subscribe to get your daily round-up of top tech stories!