Let's learn about Webpack via these 34 free stories. They are ordered by most time reading created on HackerNoon. Visit the /Learn Repo to find the most read stories about any technology.
1. How to Use Eslint With Webpack And ES6 Modules
Today we are going to talk about eslint and webpack. This is not going to teach you how to install eslint in your project, I will assume that you already did.
2. Micro-Frontends: Using TypeScript's Ambient Modules
How to use TypeScript's ambient module feature for cross-sharing micro-frontend imports using single-spa.
3. Webpack to Vite: Improving Speed and Performance
We migrated our web app’s codebase from Webpack 4 to Vite for one simple reason: speed.
4. How Does Vite Achieve Constant Time Builds?
The 3 key decisions that makes Vite faster than Webpack.
5. Get the Fastest Frontend Tooling Experience with Vite JS
If you plan to enhance your experience in frontend development, ViteJs is the next-generation tool you should consider. Let's understand why Vite is faster.
6. Set Up Webpack To Work With Static Files
In this tutorial, you'll learn how to set up webpack to work with static files in a development environment and how to configure it for multiple use cases.
7. Why Aren't You Using Aliases in Webpack Config?
Are you Developer doing FrontEnd? Are you using Webpack?
8. What it Takes to Create a Simple JavaScript Table in 2022
A few of you might still remember the post "How it feels to learn JavaScript in 2016" - It's 8 years later; a lot should have changed, shouldn't it?
9. Micro-Frontends in 2023: The Complete Guide
The Micro Frontend style of architecture design does for the frontend of an application what microservices do for the backend.
10. The Right Way to Utilize Webpack for Bundling a HTML Page With CSS and JS
The new HTML Bundler plugin makes Webpack setup incredibly simple, as all the configuration happens in one place.
11. Locking down your API_KEY and why that is important
Do you leave your keys inside your car in a big parking lot? If not, then why do you expose your API_KEYs in your Github projects?
12. How to Integrate an Image CDN in Your React Application
One of the most crucial maxims that I internalized during my career in web engineering is that every technical decision embodies tradeoffs. No matter the benefits, you’ll always face certain costs and restrictions: be it creating an abstraction in your code, scaling a distributed data store or choosing between web and mobile app format for the initial product launch.
13. How I Got Over My Fear of Webpack
And why you should too
14. Automate the Boring Stuff ...using Gulp.js
Full Disclosure:
15. 21 Javascript Bundlers 🚀
Pretty much just what the headline says: A list of 21 JS bundlers.
16. How To Set up Webpack for Web Development
webpack is a flexible bundler that provide you with tons of options and configuration so you can personalize your JavaScript projects, but with great power comes a great mess... err, I mean, great responsibility when configuring.
17. Create a Ruby on Rails (Rails-Postgresql-React) App using Docker Compose
How to create a Ruby on Rails application with Postgresql and React with Docker Compose
18. Integrate Bootstrap 4 and Font Awesome 5 in Rails 6 [A How To Guide]
Rails 6 is out for few months now, I happen needed to do a project with it. But I found I can't use the same way to integrate Bootstrap 4 & Font Awesome 5 in Rails 5 in my new project. Because in Rails 6, it start to use "webpack" as default Javascript complier.
19. An Introduction to Micro-Frontends in Enterprise Applications (part 1)
Leverage webpack module federation to build a scalable micro-frontends architecture.
20. React App Configuration with TypeScript and Webpack
A step by step guide on how to create a React project from scratch, with TypeScript and Webpack.
21. Configuring Your Phaser 3 Game With Webpack For Production
I am writing this article to help people that are just starting to learn Phaser 3 and need extra support when deploying their game to production. This tutorial will focus on configuring your app with Webpack, I will run through each line of code explaining what they are doing and why they are important. This tutorial won’t show you how to set up your Phaser 3 game, in that case I recommend you to start with this template and jump to configuring your prod.js in this article (Step 5).
22. React + Express + Typescript Boilerplate with Performance and Extended Functionality
Why Another Boilerplate
23. How to Use ES6 with Webpack
This article is for those who use ES6 syntax along with Webpack. After I started using Javascript with Webpack I met a lot of unexpected errors. All of them were because of ES6 syntax usage. Those of you who decided to start javascript using "Classes" or you need to use ESlint I'll try to explain how to save some time. In short, it's all about loaders.
24. OpenAI GPT-3 Wrote This Article About Webpack
Webpack article written by OpenAI model gpt-3
25. How We Build a Reusable Front-end Development Project Using Webpack and Tailwind CSS
One of the areas that a web developer will spend the most time learning is a build system or process to streamline their directory own local development process. When I first started working with task runners I was using Grunt to automate tasks, such as compiling Sass, bundling JavaScript, and optimizing images. However, what amazed me was that all the same tasks that I ran locally to develop could be run before deploying to a production website using a Git repository.
26. How To Pack Javascript Code with Webpack
What is Webpack?
Webpack is a module bundler for JavaScript as well as HTML applications. It grabs modular pieces of code compartmentalized in folders. Followed by reconstituting them into a compiled form. Then it's read as a whole by the application. You must be thinking, "Why break up a working code?" As your code scales, so does its complexity. Finding a correlation between each block becomes a challenge.
27. How to Run Machine-Learning Models in the Browser using ONNX
Learn how to use ONNX Runtime Web to deploy machine-learning models natively to the browser.
28. How to Run Node.js in a Browser [Tutorial]
"Browser based bundler" is a very interesting topic.
For example, can we compile the webpack code in the browser instead of the server's nodejs environment? The advantage of this is that we don't need the server's resources for compilation.
There are different solutions to this problem. For example, codesandbox, which defines a browser-based compilation strategy, can be used to package reacts, vue, etc. in the browser. It can also be easily understood that codeandbox does a browser version of webpack.
But the question is, can we execute webpack in the browser instead of doing a new one? Even implementing some webpack-based libraries?
There is a very early webpack issue discussing it . But this demo is too old to run the latest version of webpack.
I am wondering if we can do a browser environment to simulate running Node.js. Node.js and Chrome is both v8, and many of the Node.js lib code can be executed in Chrome. In addition, I found some cool libraries, such as BrowserFS, memfs, rollup-plugin-node-builtins, etc. These libraries can help us build this environment. But there is a key module, Node.js "module" is not available, we need to modify it from Node.js. Node.js supports cjs and esm, but to simplify the problem, I only develop the cjs module for the time being. Next, combine all the modules and try to run the simplest Node.js demo.
29. A Guide to Deploying Phaser 3 Webpack Games to Heroku
I’ve had a hard time figuring out how to get a Phaser 3 Game deployed on Heroku. This is why I’m going to show you how to create a brand new node.js project, integrate it with Webpack and Phaser 3 game engine using Express as a Webserver, and deploy it to Heroku, so we can see it live.
30. React, JSX, ES Module Imports And Dynamic Imports In Browser Without Using Webpack
Everything described in the article is highly experimental and I am cutting corners everywhere. By no means I recommend to use any of that in production :)
31. Create and Publish a Universal JavaScript Module
Why Universal NPM Modules?
32. How to Setup Webpack and Babel 7 for React
All of us have used CRA(create-react-app) when we worked with React. Its an awesome tool. It gives us just to focus on React by letting take care of the configuration. Today we are going to learn how to setup Webpack and Babel for our React app.
33. The 100% correct way to split your chunks with Webpack
Working out the best way to serve up files to your users can be a tricky business. There’s so many different scenarios, different technologies, different terminology.
34. Move over Next.js and Webpack 🤯
Simple Streaming SSR React with Styled-Components and Parcel
Thank you for checking out the 34 most read stories about Webpack on HackerNoon.
Visit the /Learn Repo to find the most read stories about any technology.