Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can webpack bundle js files without require or import? Q2: Why is a graph needed?

Im new to webpack and as i understand it, it will create a graph starting on the entry(ies) point and based on the require commands specified in each script thereafter.

Question 1:
I was wondering if there's a way for webpack to bundle up a bunch of specified files ( say all the files in a folder and all its subfolders ) somehow.

Question 2
Im not sure why it needs to create a graph to begin with. Wouldnt it be enough to keep a record of each library needed and only include it once at the final bundle.js script? Why a graph?

Thanks a lot

like image 707
Return-1 Avatar asked Nov 09 '17 14:11

Return-1


People also ask

How do I bundle a JavaScript file using webpack?

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.

Why do we need Webpacks?

This is why webpack exists. It's a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.

What is bundling in webpack?

Bundling tools such as Webpack and Browsify organizes and puts all your JavaScript, HTML, CSS, images and everything else in between together in a handful of neat little files to help make your web application run smoothly. These bundling tools comes pre-baked into Angular and React CLIs.

Can webpack split code into separate files?

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.


1 Answers

Question 1

This could probably help you in defining entry point as a directory using glob npm package

var glob = require("glob");
// ...
entry: glob.sync("./test/**/*Spec.js")

To followup more on this, check out this github issue https://github.com/webpack/webpack/issues/370

However, turns out entry takes an array as well, where the first file will be used for bundling and the rest are appended to the end of bundle.js

entry: ['index.js', 'otherEntry.js', ...]

Check out this Medium article for a little more on the multiple entries. https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

3. “entry” — String Vs Array Vs Object section

Question 2

DISCLAIMER: Totally personal opinion

I am not entirely sure why a graph approach was taken up but I started to come to terms with the decision due to the fact that, your whole application irrespective of how complex it could be will be executed from a starting point. Be it one entry point or multiple entry points, all your code will start from a specific function / module. Just like how everything executes from main in many programming languages. I could be entirely wrong but it's just a thought.

Someone who has done more research with Webpack or is a contributor, please edit this answer. I would like to know the exact reason as well.

like image 110
Nandu Kalidindi Avatar answered Oct 11 '22 18:10

Nandu Kalidindi