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: What is Create React App? Part 1 (Installation) | dev.to | 2021-11-27

    You don't have to worry about how to configure webpack or babel. Create React App configures all of that for you.

  • GitHub repo JHipster

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

    Project mention: YAML: It's Time to Move On | news.ycombinator.com | 2021-11-14

    Thanks for the link, but not necessarily.

    How WSDL and the code generation around it worked, was that you'd have a specification of the web API (much like OpenAPI attempts to do), which you could feed into any number of code generators, to get output code which has no coupling to the actual generator at runtime, whereas Pyotr is geared more towards validation and goes into the opposite direction: https://pyotr.readthedocs.io/en/latest/client/

    The best analogy that i can think of is how you can also do schema first application development - you do your SQL migrations (ideally in an automated way as well) and then just run a command locally to generate all of the data access classes and/or models for your database tables within your application. That way, you save your time for 80% of the boring and repetitive stuff while minimizing the risks of human error and inconsistencies, while nothing preventing you from altering the generated code if you have specific needs (outside of needing to make it non overrideable, for example, a child class of a generated class). Of course, there's no reason why this can't be applied to server code either - write the spec first and generate stubs for endpoints that you'll just fill out.

    Similarly there shouldn't be a need for a special client to generate stubs for OpenAPI, the closest that Python in particular has for now is this https://github.com/openapi-generators/openapi-python-client

    However, for some reason, model driven development never really took off, outside of niche frameworks, like JHipster: https://www.jhipster.tech/

    Furthermore, for whatever reason formal specs for REST APIs also never really got popular and aren't regarded as the standard, which to me seems silly: every bit of client code that you write will need a specific version to work against, which should be formalized.

  • Nanos

    Run Linux Software Faster and Safer than Linux with Unikernels.

  • 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: Transforming Vue app into Electron app | reddit.com/r/vuejs | 2021-11-14

    I dunno, I built a vue based electron app and it was quite straight forward using the electron-vue bolierplate https://github.com/SimulatedGREG/electron-vue. I started the project on electron-vue though which might be a bit different than developing it for web first and trying to port it into electron - for that I would probably start up a blank project with electron-vue then go step-by-step to copy files and chunks of code from the web version into it.

  • 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 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: Navigation in React App using React Router (v6) | dev.to | 2021-11-09

    When we have lot of pages in out application, we will end up having lot of code. We don't want our user to download all the code when they just load the home page. In order to package code of different routes to separate chunks, along with react router we can make use of loadable components, which takes advantage of dynamic imports.

  • 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: Negative effects when compiling on M1 Macbook | dev.to | 2021-10-31

    A quick Google search led me to here. Which suggested that I add the following to my webpack.mix.js file:

  • GitHub repo vue-loader

    📦 Webpack loader for Vue.js components

    Project mention: Creating Custom Element from SFC that also imports the SFC's styles | reddit.com/r/vuejs | 2021-11-17

    I am would like to have the added benefits of the encapsulated ShadowDOM on a Custom element, but would also like the versatility of keeping my SFCs as SFCs so that I can use them and any content placed in their slots as I normally would, without having to take the added encapsulation of the Shadow DOM into consideration if possible. Another developer had previously mentioned wanting an easy way to import styles from a SFC into a Custom element in this post, and Evan You replied that it is possible, but I was unable to find an example of it being done.

  • GitHub repo babel-loader

    📦 Babel loader for webpack

    Project mention: [ES6 modules] Is writing index.ts files for re-exports actually kind of a bad idea in non-published projects? | reddit.com/r/typescript | 2021-10-27

    And babel/webpack seems to get upset at re-exporting things that don't exist at runtime (types and interfaces): https://github.com/babel/babel-loader/issues/603. So, you need to be careful to re-export your types with a different syntax, which is hard to remember when you're writing a file full of export * from 'foo'.

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

  • GitHub repo Neutrino

    Create and build modern JavaScript projects with zero initial configuration.

    Project mention: How do I make a React component library? | reddit.com/r/reactjs | 2021-07-12

    I want to make a component library in React (TypeScript). But I don't know where exactly to begin. I've used CRA (create-react-app) before but that was to build MERN fullstack apps, and not component libraries, hence the confusion. I tried to use NeutrinoJS (as mentioned in the ReactJS docs), but it didn't have official TypeScript support/the ability to write components in TypeScript (instead of JavaScript).

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-11-27.

JavaScript Webpack related posts

Index

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

Project Stars
1 webpack 59,822
2 JHipster 19,067
3 react-loadable 16,221
4 electron-vue 14,544
5 front-end-guide 14,031
6 webpack-dashboard 13,838
7 webpack-bundle-analyzer 11,430
8 razzle 10,506
9 html-webpack-plugin 9,902
10 react-app-rewired 8,585
11 webpack-dev-server 7,216
12 prerender-spa-plugin 6,985
13 loadable-components 6,151
14 WebSlides 5,714
15 whitestorm.js 5,671
16 nwb 5,421
17 Manta 5,159
18 Laravel Mix 4,888
19 vue-loader 4,765
20 babel-loader 4,568
21 offline-plugin 4,440
22 css-loader 4,054
23 Neutrino 3,833
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.
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com