JavaScript webpack-plugin

Open-source JavaScript projects categorized as webpack-plugin

Top 23 JavaScript webpack-plugin Projects

  • prerender-spa-plugin

    Prerenders static HTML in a single-page application.

  • mini-css-extract-plugin

    Lightweight CSS extraction plugin

    Project mention: Building a web application with Rust and WebAssembly | reddit.com/r/rust | 2022-06-16

    This shouldn't be the case, at least not if you're doing it "properly". For dev builds, sure, but for production, it's better to use something like mini-css-extract-plugin to extract the bundled CSS into separate files. Then for files in your main entrypoint, the CSS will be loaded via tags, and files loaded via code-splitting, the tags will be added to the DOM dynamically.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • offline-plugin

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

  • critters

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

    Project mention: Critical CSS? Not So Fast | news.ycombinator.com | 2022-09-10

    I find critters[0] quite easy to work with and well worth implementing on my nextjs or Astro projects.

    I build a lot of landing pages so there are very few multi page visits.

    [0] https://github.com/GoogleChromeLabs/critters

  • react-refresh-webpack-plugin

    A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.

    Project mention: Enabling hot reloading with ReactJS project | reddit.com/r/webpack | 2022-06-30

    You didn't mention what version of webpack. You also want to use react-refresh-webpack-plugin.

  • copy-webpack-plugin

    Copy files and directories with webpack

  • page-skeleton-webpack-plugin

    Webpack plugin to generate the skeleton page automatically

  • Zigi

    Workflow assistant built for devs & their teams. Automate the mundane part of your day, with live actionable messages for your GitHub & Jira tasks.

  • workerize-loader

    🏗️ Automatically move a module into a Web Worker (Webpack loader)

  • svg-sprite-loader

    Webpack loader for creating SVG sprites.

  • worker-plugin

    👩‍🏭 Adds native Web Worker bundling support to Webpack.

  • terser-webpack-plugin

    Terser Plugin

    Project mention: Webpack npm run build with React Typescript | dev.to | 2022-07-15

    const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const TerserPlugin = require("terser-webpack-plugin"); module.exports = { // watch: true, mode: "production", entry: "./src/index.tsx", output: { filename: 'main.js', path: path.resolve(__dirname, 'build') }, optimization: { chunkIds: 'named', minimizer: [ new TerserPlugin({ parallel: true, terserOptions: { // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions }, }), new CssMinimizerPlugin(), ], }, plugins: [ new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html'), // template file filename: 'index.html', // output file }), new CleanWebpackPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', "@babel/preset-react"] } } }, { test: /\.css$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'autoprefixer', { overrideBrowserslist: ['last 3 versions', 'ie >9'] }, ], ], }, }, }, ], }, { test: /\.scss$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: "postcss-loader", options: { postcssOptions: { plugins: [ [ "autoprefixer", { overrideBrowserslist: ['last 3 versions', 'ie >9'] }, ], ], }, }, }, 'sass-loader' ], }, { test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] }, { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/, options: { allowTsInNodeModules: true } } ] }, resolve: { extensions: ["*",".ts", ".tsx", ".js", "jsx"] }, }

  • compression-webpack-plugin

    Prepare compressed versions of assets to serve them with Content-Encoding

    Project mention: Enable text compression using React, Webpack and Apache | reddit.com/r/codehunter | 2022-04-21

    Supposedly the compression-webpack-plugin is supposed to do it.

  • dotenv-webpack

    A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.

    Project mention: Dotenv-webpack in production? | reddit.com/r/codehunter | 2022-05-10

    I am trying to use the dotenv-webpack plugin. This works great locally. But fails when I deploy to Heroku.

  • optimize-css-assets-webpack-plugin

    A Webpack plugin to optimize \ minimize CSS assets.

    Project mention: Popular React Webpack Plugins for 2022 | dev.to | 2022-04-16

    You can read more about Optimize CSS assets Webpack Plugin here.

  • webpack-common-shake

    CommonJS Tree Shaker plugin for WebPack

    Project mention: [AskJS] What are still present issues in contemporary (2022) JavaScript? | reddit.com/r/javascript | 2022-09-15

    Tree shaking in CommonJS is possible: here's a Webpack CommonJS Tree Shaking package.

  • optimize-plugin

    Optimized Webpack Bundling for Everyone. Intro ⤵️

    Project mention: Почему и как нужно транспилировать зависимости | dev.to | 2022-02-22
  • webpack-config-plugins

    Provide best practices for webpack 4 loader configurations

  • webpack-assets-manifest

    This webpack plugin will generate a JSON file that matches the original filename with the hashed version.

    Project mention: Best practice for shared versioning between a SPA and .Net Core API? | reddit.com/r/dotnet | 2022-04-21
  • svg-spritemap-webpack-plugin

    SVG spritemap plugin for webpack

    Project mention: Which vue-cli plugin for inlining SVG images? | reddit.com/r/vuejs | 2022-06-22

    I don't know if it works with vue-cli but I use https://github.com/cascornelissen/svg-spritemap-webpack-plugin

  • webpack-require-from

    Webpack plugin that allows to configure path or URL for fetching dynamic imports

  • nodemon-webpack-plugin

    A webpack plugin that uses Nodemon to start and reload the server.

  • moment-timezone-data-webpack-plugin

    Reduce moment-timezone data size for a webpack build

  • pug-plugin

    Pug plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.

    Project mention: Pug plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug | reddit.com/r/coolgithubprojects | 2022-10-04
  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-10-04.

JavaScript webpack-plugin related posts

Index

What are some of the best open-source webpack-plugin projects in JavaScript? This list will help you:

Project Stars
1 prerender-spa-plugin 7,241
2 mini-css-extract-plugin 4,539
3 offline-plugin 4,487
4 critters 3,165
5 react-refresh-webpack-plugin 2,823
6 copy-webpack-plugin 2,750
7 page-skeleton-webpack-plugin 2,704
8 workerize-loader 2,232
9 svg-sprite-loader 1,935
10 worker-plugin 1,891
11 terser-webpack-plugin 1,826
12 compression-webpack-plugin 1,353
13 dotenv-webpack 1,227
14 optimize-css-assets-webpack-plugin 1,140
15 webpack-common-shake 908
16 optimize-plugin 651
17 webpack-config-plugins 627
18 webpack-assets-manifest 316
19 svg-spritemap-webpack-plugin 201
20 webpack-require-from 180
21 nodemon-webpack-plugin 176
22 moment-timezone-data-webpack-plugin 86
23 pug-plugin 43
Truly a developer’s best friend
Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.
scoutapm.com