JavaScript Webpack

Open-source JavaScript projects categorized as Webpack | Edit details

Top 23 JavaScript Webpack Projects

  • GitHub repo 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.

    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

  • GitHub repo JHipster

    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

    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.

  • GitHub repo react-loadable

    :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

  • GitHub repo 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: Create an Electron desktop app version of jwt.io | dev.to | 2021-06-30
  • GitHub repo front-end-guide

    📚 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
  • GitHub repo webpack-dashboard

    A CLI dashboard for webpack dev server

  • GitHub repo webpack-bundle-analyzer

    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

    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.

  • GitHub repo razzle

    ✨ 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

  • GitHub repo html-webpack-plugin

    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.

  • GitHub repo react-app-rewired

    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.

  • GitHub repo svgr

    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, } });

  • GitHub repo webpack-dev-server

    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.

  • GitHub repo prerender-spa-plugin

    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?

  • GitHub repo loadable-components

    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.

  • GitHub repo WebSlides

    Create HTML presentations in seconds —

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

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

  • GitHub repo 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)

  • GitHub repo Manta

    🎉 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.

  • GitHub repo Laravel Mix

    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)

  • GitHub repo vue-loader

    📦 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:

  • GitHub repo babel-loader

    📦 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

  • GitHub repo offline-plugin

    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.

  • GitHub repo css-loader

    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', // }, };

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 2021-10-15.

Index

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

Project Stars
1 webpack 59,588
2 JHipster 18,929
3 react-loadable 16,170
4 electron-vue 14,446
5 front-end-guide 13,965
6 webpack-dashboard 13,834
7 webpack-bundle-analyzer 11,320
8 razzle 10,422
9 html-webpack-plugin 9,842
10 react-app-rewired 8,519
11 svgr 8,034
12 webpack-dev-server 7,181
13 prerender-spa-plugin 6,926
14 loadable-components 6,027
15 WebSlides 5,714
16 whitestorm.js 5,663
17 nwb 5,408
18 Manta 5,150
19 Laravel Mix 4,840
20 vue-loader 4,748
21 babel-loader 4,543
22 offline-plugin 4,432
23 css-loader 4,040
Find remote jobs at our new job board 99remotejobs.com. There are 34 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.