purgecss-webpack-plugin - Purgecss plugin for webpack

  •        122

Webpack plugin to remove unused css. to filter out directories see the glob-all documentation here.

https://github.com/FullHuman/purgecss-webpack-plugin#readme

Dependencies:

purgecss : ^1.0.1
webpack-sources : ^1.1.0

Tags
Implementation
License
Platform

   




Related Projects

purgecss - Remove unused css

  •    Javascript

When you are building a website, chances are that you are using a css framework like Bootstrap, Materializecss, Foundation, etc... But you will only use a small set of the framework and a lot of unused css styles will be included. This is where Purgecss comes into play. Purgecss analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.

purifycss-webpack - Remove unused CSS with webpack

  •    Javascript

PurifyCSS for Webpack. This plugin uses PurifyCSS to remove unused selectors from your CSS. You should use it with the extract-text-webpack-plugin.

laravel-mix-purgecss - Zero-config Purgecss for Laravel Mix

  •    Javascript

The Purgecss config is inspired by Jonathan Reinink's config for Tailwind CSS. Before you get started, make sure you're using laravel-mix version 2.1 or higher.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

webpack-closure-compiler - Google Closure Compiler plugin for Webpack

  •    Javascript

Closure Compiler is the most advanced JavaScript optimization tool. It generates smallest bundle and emits efficient JavaScript code by doing whole program analysis and optimization, removing closures and inlining function calls, as well as tree-shaking for AMD, CommonJS and ES2015 modules. While there's JavaScript version of Closure Compiler, the original compiler is written in Java and thus Java version is more complete and performs better in terms of JavaScript code optimizations and compilation speed. If you want to use Java-based compiler, make sure you have installed Java SDK.


mini-css-extract-plugin - Lightweight CSS extraction plugin

  •    Javascript

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.

clean-webpack-plugin - A webpack plugin to remove your build folder(s) before building

  •    Javascript

This is a modified version of WebPack's Plugin documentation that includes the Clean Plugin.

critters - 🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

  •    Javascript

Critters is a Webpack plugin that inlines your app's critical CSS and lazy-loads the rest. It's a little different from other options, because it doesn't use a headless browser to render content. This tradeoff allows Critters to be very fast and lightweight. It also means Critters inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see Similar Libraries.

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

  •    Javascript

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

extract-text-webpack-plugin - Extracts text from bundle into a file

  •    Javascript

Extract text from a bundle, or bundles, into a separate file. ⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

preload-webpack-plugin - A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

  •    Javascript

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles

  •    Javascript

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. The html-webpack-plugin works without configuration. It's a great addition to the ⚙️ webpack-config-plugins.

hard-source-webpack-plugin

  •    Javascript

HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack twice with this plugin: the first build will take the normal amount of time. The second build will be signficantly faster. Install with npm install --save hard-source-webpack-plugin or yarn. And include the plugin in your webpack's plugins configuration.

html-webpack-template - a better default template for html-webpack-plugin

  •    HTML

This is a template for the webpack plugin html-webpack-plugin. It has a few extra features more than the default template which will hopefully make it less likely that you'll have to create your own index.html file in your webpack project. Templates for the html-webpack-plugin are implemented using underscore templates (previously, in 2.x, blueimp templates). You can write your own as well.

sass-loader - Compiles Sass to CSS

  •    HTML

Loads a Sass/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the mini-css-extract-plugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.

duplicate-package-checker-webpack-plugin - 🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package

  •    Javascript

Webpack plugin that warns when your bundle contains multiple versions of the same package. It might be possible that a single package gets included multiple times in a Webpack bundle due to different package versions. This situation may happen without any warning, resulting in extra bloat in your bundle and may lead to hard-to-find bugs.

offline-plugin - Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)

  •    Javascript

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.

page-skeleton-webpack-plugin - Webpack plugin to generate the skeleton page automatically

  •    Javascript

Page Skeleton is a webpack plugin.The purpose of the plugin is to generate the corresponding skeleton screen page according to different route pages in your project, and to pack the skeleton screen page into the corresponding static route page through webpack. All examples are in the examples folder.

copy-webpack-plugin - Copy files and directories with webpack

  •    Javascript

ℹ️ If you want webpack-dev-server to write files to the output directory during development, you can force it with the write-file-webpack-plugin.

friendly-errors-webpack-plugin - Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience

  •    Javascript

Friendly-errors-webpack-plugin recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience. Simply add FriendlyErrorsWebpackPlugin to the plugin section in your Webpack config.