Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about bundling npm packages, Webpack setup, or import errors, as a quick beginner-friendly overview of what a bundler is and how to start with Webpack.
Recommended by 4 people across 4 different months, 2021 to 2023.
What it is
A roughly 10 minute Fireship explainer on what JavaScript module bundlers do and why web projects use them. It compares Webpack, Rollup, Parcel and Snowpack and walks through a basic Webpack setup that bundles an npm dependency into one production file.
What people said
Recommends Youzef · 2021-12 · Stack Overflow · on “How to bundle npm packages for vanilla JavaScript frontend development and production builds on CDN servers?”
What you need to do is install a javascript bundler that translates and stores all the needed modules(e.g lodash) in an accessible place for your browser to find. Watch this video [this video] , its straight to the point and sums up everything.
Recommends noobdev00 · 2022-02 · Stack Overflow · on “Webpack bundling lodash throws syntax error”
I am a newbie to module bundlers and following this video to learn how to use Webpack: [this video] This is my incredibly simple package.json file: { "name": "t1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "lodash": "^4.17.21" }, "devDependencies": { "webpack": "^5.69.1", "webpack-cli": "^4.9.2" } } I installed lodash and imported its camelCase function as followed in my src/index.js: import { camelCase } from 'lodash'; console.log(camelCase('hello world')); I built it by npm run build and a bundled file in the dist/main.js is created, just like in the video that I linked above. I
Recommends Joshua Dance · 2022-09 · Stack Overflow · on “Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it) React-Intl for translation”
@HaiNaZheng yes you need to create one. You can do this by creating a new file called webpack.config.js I found the first half of this video helpful - [this video]
Recommends Diehardwalnut · 2023-05 · Stack Overflow · on “Why am I getting "import declarations may only appear at the top level of a module" in my firefox extension”
I am going to recommend anyone dealing with this issue to read over Dhruvil Shah's [LINK] answer. They reccomend using a bundler like Webpack or rollup. I was able to use Webpack to bundle everything up into a single file called main.js. Then, I changed my manifest.json file from .... "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"], "run_at": "document_start" } ], .... to .... "content_scripts": [ { "matches": ["<all_urls>"], "js": ["dist/main.js"], "run_at": "document_start" } ], .... Also, this video from fireship [this video] on YouTube helped me used Webpack too.
Cites Andreas Jagiella · 2021-12 · Stack Overflow · on “How to 'build' a node js application?”
There is no need to build a normal nodejs application. What you mean is the use of a bundler e.g. webpack and a javascript compiler e.g. babel. To create a react application, you usually use a tool like create-react-app that sets up all this stuff for you. For react you need the compilation beacause you use the jsx syntax that browsers do not understand. In addition to that a bundler has some more advantages. Check out this video if you want to know more about it: [this video]