7,096 reads

Webpack loaders and plugins for your new Progressive Web App.

by Vladimir MetnewApril 17th, 2017

Too Long; Didn't Read

I assume you’ve already known what is <a href="https://webpack.js.org/concepts/" target="_blank">Webpack</a>, why it’s awesome and <a href="https://webpack.js.org/guides/get-started/" target="_blank">how it works</a>, so let’s start:

Companies Mentioned

featured image - Webpack loaders and plugins for your new Progressive Web App.

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).