Top 23 JavaScript Webpack Projects

• webpack

  95 59,588 9.9 JavaScript

  A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  

  Project mention: a first look at nuxt 3 | dev.to | 2021-10-15

  A bundler to support hot module replacement in development and bundling for production - Webpack 5 and Vite both supported

• JHipster

  14 18,929 10.0 JavaScript

  JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.

  

  Project mention: Ć Programming Language | news.ycombinator.com | 2021-10-08

  Not talking about the interesting naming or the circumstances around this particular implementation, what do the people on HN think about the concept of such transpilation?

  I recall taking a course in university about model driven programming - the idea of creating an abstract representation of logic, interfaces and other system components and then generating either full implementations or stubs in multiple languages was an interesting one, even if implementations were really hard to get right.

  In practice, i've mostly only seen one language specific model driven design tools, like JHipster (https://www.jhipster.tech/) or the likes of JPA be reasonably successful, since there's a lot of problems with supporting abstractions across different languages and runtimes, but what has been the experience of others in that regard?

• Syncfusion

  syncfusion.com

  sponsored

  Build stunning web applications quickly using Syncfusion JavaScript UI controls.. The Syncfusion JavaScript suite offers more than 65 cross-platform, responsive, and lightweight JS/HTML5 UI controls for building modern web applications.

  

• react-loadable

  1 16,170 0.0 JavaScript

  :hourglass_flowing_sand: A higher order component for loading components with promises.

  Project mention: React Lazy Loading; does it slow down your app? | reddit.com/r/reactjs | 2021-04-18

  Preloading is possible with react-loadable: https://github.com/jamiebuilds/react-loadable#preloading

• electron-vue

  2 14,446 4.1 JavaScript

  An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

  Project mention: Create an Electron desktop app version of jwt.io | dev.to | 2021-06-30

• front-end-guide

  1 13,965 0.0 JavaScript

  📚 Study guide and introduction to the modern front end stack.

  

  Project mention: Front-end guide from Grab | reddit.com/r/u_hasanlock | 2021-03-02

• webpack-dashboard

  0 13,834 6.4 JavaScript

  A CLI dashboard for webpack dev server

  

• webpack-bundle-analyzer

  8 11,320 7.5 JavaScript

  Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

  

  Project mention: Angular 12 + ESLint + Material + Transloco + Jest + Compodoc + Docker | dev.to | 2021-08-07

  npm run analyse - analyse bundle with webpack-bundle-analyzer

• Scout APM

  scoutapm.com

  sponsored

  Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.

  

• razzle

  4 10,422 9.6 JavaScript

  ✨ Create server-rendered universal JavaScript applications with no configuration

  Project mention: Diffrent Ways To Create A React Application | dev.to | 2021-10-05

  It Is Serverside Rendering Framework As Well And This Provide Much More Flexibility. Razzle Docs

• html-webpack-plugin

  5 9,842 6.7 JavaScript

  Simplifies creation of HTML files to serve your webpack bundles

  Project mention: Support runtime data injection to a static markup produced by HtmlWebpackPlugin, using EJS | dev.to | 2021-04-23

  Let’s say you use Webpack HtmlWebpackPlugin to produce a static HTML file from a template you have, but sometimes that’s not enough. This page that you’re producing is that main static page for your SPA (Single Page Application) and aside from the processed bundles, versioning etc. you would like it to have other runtime data that concerns your entire site, for instance some sort of a configuration (not secret, god forbids) that needs to be available for scripts on the client.

• react-app-rewired

  4 8,519 1.9 JavaScript

  Override create-react-app webpack configs without ejecting

  Project mention: Running React Native everywhere: The Web | dev.to | 2021-09-26

  If Create React App supported Yarn workspaces out-of-the-box, what we've done so far would have been enough to run the app... unfortunately, it doesn't. Luckily, we can use CRACO (or other tools such as customize-cra or react-app-rewired) to customize the Webpack configuration used by Create React App to resolve packages imported from other workspaces.

• svgr

  9 8,034 7.4 JavaScript

  Transform SVGs into React components 🦁

  Project mention: Use Storybook with Tailwind in an Nx Workspace | dev.to | 2021-10-12

  // apps/site/next.config.js // eslint-disable-next-line @typescript-eslint/no-var-requires const withNx = require('@nrwl/next/plugins/with-nx'); module.exports = withNx({ nx: { // Set this to false if you do not want to use SVGR // See: https://github.com/gregberge/svgr svgr: true, } });

• webpack-dev-server

  4 7,181 9.8 JavaScript

  Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.

  

  Project mention: React with Webpack is not working on localhost | reddit.com/r/reactjs | 2021-07-04

  It looks like you don't have webpack-dev-server setup. That's what will allow you to have that seamless dev experience.

• prerender-spa-plugin

  2 6,926 0.0 JavaScript

  Prerenders static HTML in a single-page application.

  Project mention: Vue3: Render each route to an html page | reddit.com/r/vuejs | 2021-08-10

  With Vue3, its possible to pre-render each page with `https://github.com/chrisvfritz/prerender-spa-plugin` However, I would like to render each page to an actual html file, so that `vue-router` will not be used, but instead the server will take care of serving each page. Is that possible?

• loadable-components

  4 6,027 6.8 JavaScript

  The recommended Code Splitting library for React ✂️✨

  Project mention: Frontend Performance Optimization with Code Splitting using React.Lazy & Suspense 🔥 | dev.to | 2021-07-05

  // Components.js export const Component = /* ... */; export const UnusedComponent = /* ... */; // Component.js export { Component as default } from "./Components.js"; As both React.lazy and Suspense are not available for rendering on the server yet now, it is recommended to use https://github.com/gregberge/loadable-components for code-splitting in a server-rendered app (SSR). React.lazy is helpful for rendering dynamic import as a regular component in client-rendered app (CSR). Magic Comment at import() import( /* webpackChunkName: "test", webpackPrefetch: true */ "LoginModal" ) // or import( /* webpackChunkName: "test" */ /* webpackPrefetch: true */ "LoginModal" ) // spacing optional "webpackChunkName" : Using this magic comment we can set name for the js chunk that is loaded on demand.

• WebSlides

  1 5,714 0.0 JavaScript

  Create HTML presentations in seconds —

  

  Project mention: 18 amazing 🤩 GitHub repositories that will help you 🪄 make a beautiful project | dev.to | 2021-09-03

• whitestorm.js

  0 5,663 0.0 JavaScript

  :rocket: 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js

  

• nwb

  0 5,408 1.5 JavaScript

  A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

• Manta

  1 5,150 0.0 JavaScript

  🎉 Flexible invoicing desktop app with beautiful & customizable templates.

  Project mention: How do you create your invoices? | dev.to | 2021-05-07

  My favorite is a free, open-source project Manta - a desktop application for creating invoices with beautiful and customizable templates.

• Laravel Mix

  8 4,840 8.7 JavaScript

  The power of webpack, distilled for the rest of us.

  

  Project mention: How target node with laravel-mix? | reddit.com/r/laravel | 2021-07-21

  I've found a workaround and raised an issue (https://github.com/JeffreyWay/laravel-mix/issues/3045)

• vue-loader

  1 4,748 5.2 JavaScript

  📦 Webpack loader for Vue.js components

  

  Project mention: [WP5/Vue] Can I write a rule that matches an issuer's resourceQuery? | reddit.com/r/webpack | 2021-03-17

  I am not proud of this solution, but it should only be necessary until a PR is accepted with these changes:

• babel-loader

  2 4,543 3.2 JavaScript

  📦 Babel loader for webpack

  

  Project mention: I can't get babel to work with react-testing library and nextjs | reddit.com/r/learnprogramming | 2021-09-29

  Apparently, this is usually a problem with Babel 7 and plugins but I've upgraded the plugins and still have this issue: https://github.com/babel/babel-loader/issues/560

• offline-plugin

  2 4,432 0.0 JavaScript

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

  Project mention: Meteor with Webpack in 2018 — Faster compilation and better source handling | dev.to | 2021-07-29

  For example, you have a Progressive Web Application using Service Workers, written in Angular, then you have to create a service worker manifest based on your output files. We don’t have a solution for this on Meteor CLI natively. However, Webpack has a lot of community plugins such as OfflinePlugin , Workbox and many others for this problem as a solution. Just install them, and add to your webpack.config.js . Meteor-Webpack will handle it like you’re working on a pure Webpack project.

• css-loader

  5 4,040 8.1 JavaScript

  CSS Loader

  

  Project mention: [beginner help] Breaking change in config file | reddit.com/r/webpack | 2021-10-14

  const config = { mode: isProdBuild ? 'production' : 'development', devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map', entry: { app: `${SRC_DIR}/index.js`, }, optimization: { minimize: isProdBuild, sideEffects: true, }, context: SRC_DIR, stats: { colors: true, hash: true, timings: true, assets: true, chunks: false, chunkModules: false, modules: false, children: false, warnings: true, }, module: { rules: [ transpileJavaScriptRule(mode), loadWebWorkersRule, loadShadersRule, ], }, resolve: { // Which directories to search when resolving modules modules: [ // Modules specific to this package path.resolve(__dirname, '../node_modules'), // Hoisted Yarn Workspace Modules path.resolve(__dirname, '../../../node_modules'), SRC_DIR, ], // Attempt to resolve these extensions in order. extensions: ['.js', '.jsx', '.json', '*'], // symlinked resources are resolved to their real path, not their symlinked location symlinks: true, }, plugins: [ new webpack.DefinePlugin({ /* Application */ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 'process.env.DEBUG': JSON.stringify(process.env.DEBUG), 'process.env.APP_CONFIG': JSON.stringify(process.env.APP_CONFIG || ''), 'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || ''), 'process.env.VERSION_NUMBER': JSON.stringify(PACKAGE.version || ''), 'process.env.BUILD_NUM': JSON.stringify(BUILD_NUM), /* i18n */ 'process.env.USE_LOCIZE': JSON.stringify(process.env.USE_LOCIZE || ''), 'process.env.LOCIZE_PROJECTID': JSON.stringify(process.env.LOCIZE_PROJECTID || ''), 'process.env.LOCIZE_API_KEY': JSON.stringify(process.env.LOCIZE_API_KEY || ''), /* XNAT dev */ 'process.env.XNAT_PROXY': JSON.stringify(process.env.XNAT_PROXY || ''), 'process.env.XNAT_DOMAIN': JSON.stringify(process.env.XNAT_DOMAIN || ''), 'process.env.XNAT_USERNAME': JSON.stringify(process.env.XNAT_USERNAME || ''), 'process.env.XNAT_PASSWORD': JSON.stringify(process.env.XNAT_PASSWORD || ''), }), ], // // Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881 // // For issue in cornerstone-wado-image-loader // node: { // fs: 'empty', // }, };

Index

Sponsored

Run Linux Software Faster and Safer than Linux with Unikernels

github.com/nanovms