Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Top 23 Webpack Open-Source Projects
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
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.
-
turbo
Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
JHipster
JHipster, much like Spring initializr, is a generator to create a boilerplate backend application, but also with an integrated front end implementation in React, Vue or Angular. In their own words, it "Is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures."
-
react-loadable
:hourglass_flowing_sand: A higher order component for loading components with promises.
-
webpack-bundle-analyzer
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
-
tamagui
Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
-
nebular
:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
-
CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
-
webpack-dev-server
Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
As a development server, we can use an actual development server of our app, like Create React App (that we use for the examples) or Vite, or another tool like React Styleguidist or Storybook, to test isolated components.
Project mention: Practical and Beginner friendly guide for speeding up your web-apps | dev.to | 2024-05-01There are various tools available that manage the size of bundled assets. We are going to use the example of a popular and widely used bundler named Webpack, and practically look at many of the optimization techniques it offers.
Project mention: Is there any github repo or something for medium or advanced level project in Angular that I can run in my local and learn something from that ?? | /r/Angular2 | 2023-09-06I learned a lot from the ngx-admin template but if you want a real world project PeerTube's Web app written in Angular you can check it out here
Supermemory has three main modules, managed by turborepo:
Project mention: How I Used Electron and React to Create a Sweet UI for FFMPEG | dev.to | 2023-12-15For a swift and efficient setup, I began by cloning the Electron-React Boilerplate. This boilerplate provided a pre-configured combination of Electron and React, along with Redux and Webpack, setting a solid foundation for the project. This choice allowed me to focus on building the unique features of my application, leveraging the boilerplate's stable and community-tested framework.
React-Redux Links - List of tutorials and resources for React/Redux.
An easy way to get a pre-configured Keycloak instance is to use JHipster's jhipster-sample-app-oauth2 application. It gets updated with every JHipster release. You can clone it with the following command:
Mo.js is a potent and adaptable JavaScript animation library with a straightforward API and browser support. It's distinguished by its high-performance animations and density-independent effects, ensuring outstanding visual quality on any device. Mo.js provides extensive tools for animation creation, including Player for animation control, Curve Editor, and Timeline Editor for custom easing and editing.
I used to use webpack-bundle-analyzer but we have switched the builder to browser-esbuild now.
Razzle is a build tool created by Airbnb, which also simplifies server-side rendering. It abstracts away the complexity of configuring server-side rendering settings and allows developers to easily create versatile JavaScript applications. Razzle supports features like code splitting, CSS-in-JS, and hot module replacement, making it suitable for building React applications that require server-side rendering.
Project mention: Nx + NextJS + Docker - The Nx way: Creating the NextJS application | dev.to | 2023-06-27//@ts-check // eslint-disable-next-line @typescript-eslint/no-var-requires const { composePlugins, withNx } = require('@nx/next'); /** * @type {import('@nx/next/plugins/with-nx').WithNxOptions} **/ const nextConfig = { nx: { // Set this to true if you would like to use SVGR // See: https://github.com/gregberge/svgr svgr: false, }, }; const plugins = [ // Add more Next.js plugins to this list if needed. withNx, ]; module.exports = composePlugins(...plugins)(nextConfig);
Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29Tamagui is a UI kit that aims to bridge the gap between React and React Native applications by addressing the fundamental parts of an app, such as styling, theming, and cross-platform components, while keeping app performance in mind. It utilizes an optimizing compiler to significantly improve performance by hoisting objects and CSS at build-time. Its main advantage is that it creates a consistent design system across web and native platforms. Some major highlights of Tamagui are:
Nebular (MIT license)
Project mention: Possible bug when running webpack-dev-server in npm child project | /r/webpack | 2023-06-02So I spent couple hours to sort the bug report out properly :) https://github.com/webpack/webpack-dev-server/issues/4890
Webpack related posts
-
Practical and Beginner friendly guide for speeding up your web-apps
-
How to use NextJS pathname in Storybook 8
-
The Rails asset pipeline, old and new
-
Storybook not picking up tailwindcss
-
Bridging Analog to Angular with esbuild and Vite
-
Optimizing React Apps for Performance: A Comprehensive Guide
-
Show HN: Jampack – Optimizes static websites as a post-processing step
-
A note from our sponsor - InfluxDB
www.influxdata.com | 7 May 2024
Index
What are some of the best open-source Webpack projects? This list will help you:
Project | Stars | |
---|---|---|
1 | vue-element-admin | 86,428 |
2 | storybook | 82,881 |
3 | webpack | 64,179 |
4 | ngx-admin | 25,046 |
5 | turbo | 25,030 |
6 | electron-react-boilerplate | 22,651 |
7 | react-redux-links | 22,520 |
8 | JHipster | 21,231 |
9 | js-stack-from-scratch | 20,041 |
10 | Mo.js | 18,260 |
11 | react-loadable | 16,595 |
12 | front-end-guide | 15,083 |
13 | webpack-dashboard | 13,874 |
14 | webpack-bundle-analyzer | 12,501 |
15 | razzle | 11,082 |
16 | html-webpack-plugin | 10,641 |
17 | PatrickJS-starter | 10,338 |
18 | svgr | 10,324 |
19 | tamagui | 10,083 |
20 | react-app-rewired | 9,718 |
21 | nebular | 8,019 |
22 | CSS Layout | 8,011 |
23 | webpack-dev-server | 7,744 |
Sponsored