Top 23 JavaScript Webpack Projects
-
webpack
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.
Webpack
-
JHipster
JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
Project mention: Is there anything like ASP.NET Razor templates for login, register, manage account and others in Spring framework? | reddit.com/r/java | 2021-02-13 -
Scout
Get performance insights in less than 4 minutes. 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.
-
electron-react-boilerplate
A Foundation for Scalable Cross-Platform Apps
-
Mo.js
The motion graphics toolbelt for the web
-
webpack-dashboard
A CLI dashboard for webpack dev server
-
electron-vue
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: Best Ui Frameworkslibraries To Use With Electron | reddit.com/r/electronjs | 2021-02-28 -
webpack-bundle-analyzer
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
Before splitting our bundle we should exhaust all our efforts and try to reduce our bundle size. Sometimes we might find it contains a lot of unnecessary user code or dependencies. A popular dev dependency we can use just for this is webpack-bundle-analyzer. This is a webpack plugin that can generate a bundle report, which allows us to dive into the content of our bundles in a visual manner, analyze them, and get some good insights.
-
razzle
✨ Create server-rendered universal JavaScript applications with no configuration
So I found Razzle. As you can read in the Razzle project description, it specifically aims to feel the gap in buy you into a framework or setting things yourself.
-
html-webpack-plugin
Simplifies creation of HTML files to serve your webpack bundles
Project mention: My first public React 17 Boilerplate (with Webpack 5, Tailwind 2) | dev.to | 2021-01-02html-webpack-plugin - Generate HTML files from template
-
react-app-rewired
Override create-react-app webpack configs without ejecting
Project mention: Run your React Native app on the web with React Native for Web | dev.to | 2020-11-15Eventually, you might need to customize your project beyond what Create React App allows you to do. Most of these customizations will probably be just slight changes to the Webpack and Babel configuration of Create React App where ejecting would be overkill — which is why you might wanna use something like react-app-rewired, customize-cra, or craco to apply these changes without ejecting.
-
svgr
Transform SVGs into React components 🦁
I'm using SVGR to transform my SVG files into React components, rather than loading them via . This means my SVGs will be loaded with the markup, rather than being loaded asynchronously, which can help eliminate Cumulative Layout Shift (CLS) issues. It's as simple as customizing your next.config.js file to use the @svgr/webpack loader for *.svg file types, then importing them in your components, a la:
-
webpack-dev-server
Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
Project mention: My first public React 17 Boilerplate (with Webpack 5, Tailwind 2) | dev.to | 2021-01-02webpack-dev-server - Development server for webpack
-
whitestorm.js
:rocket: 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js
-
nwb
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)
-
loadable-components
The recommended Code Splitting library for React ✂️✨
So by using Loadable components we can select the packages which we want to load after the content is loaded.
-
Laravel Mix
The power of webpack, distilled for the rest of us.
https://github.com/JeffreyWay/laravel-mix/issues/2550#issuecomment-752735914
-
offline-plugin
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
Since Omatsuri is a browser only application the only thing that we need from service worker is to cache assets and provide app shell. Offline plugin does exactly that, the only thing we need to do – add it to the production build in webpack config:
-
after.js
Next.js-like framework for server-rendered React apps built with React Router
After.js
-
Neutrino
Create and build modern JavaScript projects with zero initial configuration.
-
vue-cli-plugin-electron-builder
Easily Build Your Vue.js App For Desktop With Electron
I've used Electron Builder together with the Electro Builder Vue CLI to build my first application. According to the official Electron website, it's described as a "complete solution to package and build a ready-for-distribution Electron app that focuses on an integrated experience."
-
vue-express-mongo-boilerplate
:star: MEVN Full stack JS web app boilerplate with NodeJS, Express, Mongo and VueJS
Project mention: Show HN: Supercharge.dev – Accelerated Development in React/Next.js | news.ycombinator.com | 2021-01-24[1]: https://github.com/icebob/vue-express-mongo-boilerplate
-
copy-webpack-plugin
Copy files and directories with webpack
Project mention: My first public React 17 Boilerplate (with Webpack 5, Tailwind 2) | dev.to | 2021-01-02copy-webpack-plugin - Copy files to build directory
-
minipack
📦 A simplified example of a modern module bundler written in JavaScript
JavaScript: Build Your Own Module Bundler - Minipack
Index
What are some of the best open-source Webpack projects in JavaScript? This list will help you:
Project | Stars | |
---|---|---|
1 | webpack | 57,501 |
2 | JHipster | 18,027 |
3 | electron-react-boilerplate | 16,986 |
4 | Mo.js | 16,510 |
5 | webpack-dashboard | 13,748 |
6 | electron-vue | 13,684 |
7 | webpack-bundle-analyzer | 10,740 |
8 | razzle | 9,974 |
9 | html-webpack-plugin | 9,454 |
10 | react-app-rewired | 7,951 |
11 | svgr | 7,341 |
12 | webpack-dev-server | 6,785 |
13 | whitestorm.js | 5,575 |
14 | nwb | 5,268 |
15 | loadable-components | 5,264 |
16 | Laravel Mix | 4,546 |
17 | offline-plugin | 4,398 |
18 | after.js | 3,935 |
19 | Neutrino | 3,726 |
20 | vue-cli-plugin-electron-builder | 2,932 |
21 | vue-express-mongo-boilerplate | 2,745 |
22 | copy-webpack-plugin | 2,556 |
23 | minipack | 2,368 |