I assume you’ve already known what is , why it’s awesome and , so let’s start: Webpack how it works Probably, you aware of such commonly used tools for like: , , , and other popular stuff. Webpack style-loader html-webpack-plugin extract-text-webpack-plugin file-loader 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 , 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. webpack.config _offline-plugin - Offline plugin (ServiceWorker, AppCache) for webpack (http://webpack.github.io/)_github.com NekR/offline-plugin 2. Preload-webpack-plugin _preload-webpack-plugin - A Webpack plugin for wiring up ` ` (and prefetch) - supports async chunks_github.com GoogleChrome/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 chunks using . This helps with lazy-loading. JavaScript <link rel='preload'> 3. Webpack-manifest-loader Webpack plugin for generating asset manifests Automatically generates for your app. manifest.json _webpack-manifest-plugin - webpack plugin for generating asset manifests_github.com danethurber/webpack-manifest-plugin 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 comes. This webpack loader aims to remove unused css selectors. Purify-CSS You use it with the . Note: should extract-text-webpack-plugin _purifycss-webpack - Remove unused CSS with webpack_github.com webpack-contrib/purifycss-webpack 5. Copy-webpack-plugin This is a plugin that copies individual files or entire directories to the build directory. webpack _copy-webpack-plugin - Copy files and directories in webpack_github.com kevlened/copy-webpack-plugin 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. _isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps_github.com kriasoft/isomorphic-style-loader From official docs: An alternative CSS style loader, which works similarly to , but is optimized for . In addition to what style-loader provides, it allow to render during server-side rendering (SSR), by adding two helper methods on to the object - (injects CSS into the DOM) and (returns CSS string). style-loader isomorphic apps critical path CSS styles ._insertCss() ._getCss() 7. Eslint-loader eslint loader (for webpack) _eslint-loader - eslint loader (for webpack)_github.com MoOx/eslint-loader Loader, Eslint-loader. Do you know about eslint option? With this option your code will be automagically formatted by eslint. fix How to build app with all these plugins and loaders? Just take a look at this example. Github: https://github.com/Metnew Twitter: https://twitter.com/coldlinecall

AirBnB

Google

Progressive

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Webpack loaders and plugins for your new Progressive Web App.

Too Long; Didn't Read

Companies Mentioned

Vladimir Metnew

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Webpack loaders and plugins for your new Progressive Web App.

Too Long; Didn't Read

Companies Mentioned

Vladimir Metnew

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES