--- title: Best Webpack posts of 2022 | daily.dev description: The most upvoted Webpack posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/webpack/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/webpack/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best Webpack posts of 2022 | daily.dev og:description: The most upvoted Webpack posts of 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Webpack — 2022 1. 1 [](/posts/blog---next-js-13-gcx-wf7qz "Blog - Next.js 13") Article Next.js · 4y Blog - Next.js 13 Next.js 13 includes Turbopack, the new Rust-based successor to Webpack. New next/image(stable): Faster with native browser lazy loading. New @next/font(beta): Automatic self-hosted fonts with zero layout shift. 422 24 2. 2 [](/posts/micro-frontend-with-react-and-next-js-goe5wsium "Micro-frontend with React and Next.js") Article LogRocket · 4y Micro-frontend with React and Next.js The bottom line is that you should split your project up so that the user experience won't be disturbed. It should look like this: We have to expose our component to make it globally available for another micro-frontend. We will use the exported component of fe1 and the function of fe2\. Let’s treat fe3 as a consumer. Let's treat fe2 as a customer. Let�’S treat fe1 as a consumers. 242 7 3. 3 [](/posts/introducing-turbopack-rust-based-successor-to-webpack-vercel-uraatdhsj "Introducing Turbopack: Rust-based successor to Webpack – Vercel") Article Vercel · 4y Introducing Turbopack: Rust-based successor to Webpack – Vercel Turbopack: Rust-based successor to Webpack Vercel's mission is to provide the speed and reliability innovators need to create at the moment of inspiration. It's built on a new incremental architecture for the fastest possible development experience. 231 11 4. 4 [](/posts/time-to-say-goodbye-to-webpack--enrnnxxhl "Time to Say Goodbye to Webpack?") Article JavaScript in Plain English · 5y Time to Say Goodbye to Webpack? Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its plugin API and JavaScript API with full typing support. 191 9 5. 5 [](/posts/make-your-react-apps-fast-again-o6yn0qp7o "Make your React apps fast again") Article Community Picks · 4y Make your React apps fast again Profiler can help you improve performance of a React application. We will go over ways to improve the performance of an app, including some pre-optimization techniques. We can use the Profiler in the React DevTools to measure performance of our apps. To use the profiler, you must Some are asynchronous, such as background HTTP calls, while others occur by user or You. 170 6 6. 6 [](/posts/the-state-of-frontend-in-2022-f7xsx27d "The State of Frontend in 2022") Article Pointer · 4y The State of Frontend in 2022 The State of Frontend in 2022 analysis of 3,700 respondents from 125 countries. The 5 countries with the most responses were the US, Poland, UK, Germany and India. Only 18% of people filling out the survey said they work at non-tech-first companies. 142 1 7. 7 [](/posts/vite-3-0-vs-create-react-app-kyqilrbzn "Vite 3.0 vs. Create React App") Article LogRocket · 4y Vite 3.0 vs. Create React App Vite is built on top of esbuild, a JavaScript bundler written in Go, which bundles dependencies 10-100 times faster than JavaScript-based bundlers. Vite leverages the browser’s native ESM to parse and compile your code as the browser requests it. The browser only needs to pre-bundle your dependencies. 135 7 8. 8 [](/posts/introduction-to-vite-the-next-generation-frontend-tooling-3ee-9lslq "Introduction to Vite: The Next Generation Frontend Tooling") Article Hashnode · 4y Introduction to Vite: The Next Generation Frontend Tooling Vite is the next generation frontend tooling. It is a solution to slow server starts because it uses native ESM to serve code. Most tools like webpack, Parcel and Rollup are bundle-based. This means the code has to be completely bundled before it can be served. Vite only needs to transform and serve source code on demand. 113 3 9. 9 [](/posts/how-webpack-works--nrgzbdycy "How Webpack works?") Article Medium · 4y How Webpack works? Webpack is a commonly used library among modern frontend-based applications. It is a decade-old and battle-tested library. Many of the full-fledged frontend frameworks like NextJS, and Gatsby use webpack for bundling and compilation purposes by default. 64 1 10. 10 [](/posts/top-alternatives-to-create-react-app-7fkcefsab "Top alternatives to Create-React-App") Article asayer · 4y Top alternatives to Create-React-App The React team’s official launch script, Create-React-App (CRA) is the best choice for launching your React applications. There are some difficulties that developers run into while starting their project with the CRA. 58 2 11. 11 [](/posts/getting-started-with-vite-gxrhmn1of "Getting started with Vite") Article asayer · 4y Getting started with Vite Vite serves your code via native ES module imports during development and bundles it with Rollup for production. Vite is a lightning-fast cold server start and offers instant hot module replacement and true on-demand compilation. It is also highly extensible via its plugin API and JavaScript API with full typing support. 56 3 12. 12 [](/posts/next-js-13---build-powerful-dynamic-web-applications-without-limits-uw2nq3p99 "Next.js 13 - Build powerful & dynamic web applications – without limits") Article Product Hunt · 4y Next.js 13 - Build powerful & dynamic web applications – without limits Next.js 13 includes nested layouts, server-side streaming, component-based data-fetching, and Turbopack – the Rust-based 46 13. 13 [](/posts/top-5-alternatives-to-webpack-vlhbutwl4 "Top 5 alternatives to Webpack") Article asayer · 4y Top 5 alternatives to Webpack Webpack is a free and open-source module bundler for JavaScript applications. It is used to bundle JS files for usage in a web browser, and it can transform front-end assets such as HTML, CSS, and images if corresponding loaders are included. Webpack works by processing your application and internally building a dependency graph. 36 3 14. 14 [](/posts/let-s-understand-webpack--yhqfggtqj "Let’s understand WEBPACK !!!") Article Towards Dev · 4y Let’s understand WEBPACK !!! The Webpack is Build and Managing Tool that manages your Javascript code and Styles. Let’s take a small HTML application with 3 files such as - index.html — A basic page with the text Wepack - Build Toolin it and 2 files linked. 36 4 15. 15 [](/posts/testing-react-applications-with-jest-jmkhatldn "Testing React Applications with Jest") Article Auth0 · 4y Testing React Applications with Jest MockingJest allows you to mock objects in your test files. You can turn on automatic mocking with automock which will mock every component/object that the component is part of your project. For the first test, we'll write a simple test that ensures that Jest was set up correctly and that it can run a test successfully. 20 4 16. 16 [](/posts/modern-faster-alternatives-to-eslint-go9mnkvub "Modern, faster alternatives to ESLint") Article LogRocket · 4y Modern, faster alternatives to ESLint In this article, we will look at specific open source libraries that either serve as alternatives to ESLint or can be integrated with ESLint. Some of these libraries are built to outright replace ESLint and improve on aspects such as performance or developer experience. We’ll focus on libraries that work well within the JavaScript ecosystem. 19 17. 17 [](/posts/create-react-app-without-create-react-app-6qts0fzt1 "Create React App without Create React App") Article Bits and Pieces · 5y Create React App without Create React App This article talks about the process of creating react app without using any libraries or frameworks such as “create-react-app” , “NextJS” etc. This article will help us to understand how webpack and babel work in a more practical sense. 19 1 [See all Webpack archives](/tags/webpack/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/webpack/best-of/2022#page","url":"https://daily.dev/tags/webpack/best-of/2022","name":"Best Webpack Posts of 2022","description":"The most upvoted Webpack posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/webpack/best-of/2022#items","numberOfItems":17,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/blog---next-js-13-gcx-wf7qz","name":"Blog - Next.js 13"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/micro-frontend-with-react-and-next-js-goe5wsium","name":"Micro-frontend with React and Next.js"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/introducing-turbopack-rust-based-successor-to-webpack-vercel-uraatdhsj","name":"Introducing Turbopack: Rust-based successor to Webpack – Vercel"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/time-to-say-goodbye-to-webpack--enrnnxxhl","name":"Time to Say Goodbye to Webpack?"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/make-your-react-apps-fast-again-o6yn0qp7o","name":"Make your React apps fast again"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/the-state-of-frontend-in-2022-f7xsx27d","name":"The State of Frontend in 2022"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/vite-3-0-vs-create-react-app-kyqilrbzn","name":"Vite 3.0 vs. Create React App"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/introduction-to-vite-the-next-generation-frontend-tooling-3ee-9lslq","name":"Introduction to Vite: The Next Generation Frontend Tooling"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-webpack-works--nrgzbdycy","name":"How Webpack works?"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/top-alternatives-to-create-react-app-7fkcefsab","name":"Top alternatives to Create-React-App"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/getting-started-with-vite-gxrhmn1of","name":"Getting started with Vite"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/next-js-13---build-powerful-dynamic-web-applications-without-limits-uw2nq3p99","name":"Next.js 13 - Build powerful & dynamic web applications – without limits"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/top-5-alternatives-to-webpack-vlhbutwl4","name":"Top 5 alternatives to Webpack"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/let-s-understand-webpack--yhqfggtqj","name":"Let’s understand WEBPACK !!!"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/testing-react-applications-with-jest-jmkhatldn","name":"Testing React Applications with Jest"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/modern-faster-alternatives-to-eslint-go9mnkvub","name":"Modern, faster alternatives to ESLint"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/create-react-app-without-create-react-app-6qts0fzt1","name":"Create React App without Create React App"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Webpack","item":"https://daily.dev/tags/webpack"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/webpack/best-of"},{"@type":"ListItem","position":5,"name":"2022"}]}]} ```