Add support for multiple entry points

[devongovett]

Closes #189.

This PR adds support for multiple entry points to Parcel. It works by simply adding an additional fake node at the root of the bundle tree and attaching each entry asset to it as a child. If there is only one child, that child bundle is returned as it was before for convenience and to maintain backward compatibility.

Entry points can be passed to parcel as a list of files, or as a glob or list of globs. e.g. parcel *.html will run parcel over all HTML files in the current directory. Common dependencies between the entry points, such as a shared JS file, are deduped and produce a single output file that is linked to by both HTML entry points.

[davidnagli]

Umm doesn’t this break backwards-compatibility for anyone using Parcel programmatically (requiring Parcel and then manually instanciating Bundler)?? 🤔

[devongovett]

Should be backward compatible. It will check if the input is a string rather than an array, and convert it for you.

parcel/src/Bundler.js

Lines 65 to 80 in 81aaf9b

	normalizeEntries(entryFiles) {
	// Support passing a single file
	if (entryFiles && !Array.isArray(entryFiles)) {
	entryFiles = [entryFiles];
	}
	// If no entry files provided, resolve the entry point from the current directory.
	if (!entryFiles || entryFiles.length === 0) {
	entryFiles = [process.cwd()];
	}
	// Match files as globs
	return entryFiles
	.reduce((p, m) => p.concat(glob.sync(m, {nonull: true})), [])
	.map(f => Path.resolve(f));
	}

[davidnagli]

Oh cool didn’t notice that 👍

[briandk]

@devongovett I would love to see this feature! Unfortunately, It looks like the Appveyor build is failing a Vue.js integration test:

vue should produce a vue bundle using preprocessors:
C:\projects\parcel\test\integration\vue-preprocessors\pre-processors.vue:5:22

I'm kind of a first-timer here, but is there anything I can do to help?

[fathyb]

@briandk: it seems unrelated to the PR, tracked by #1110 about it and it should be fixed by #1090.

Feel free to check out our 👶 Good First Issue though, contributions are more than welcome :)

[FGRibreau]

For those who wish to try it #cuttingEdge:

"scripts": {
    "postinstall": "cd node_modules/parcel-bundler && npm i"
},
"devDependencies": {
    "parcel-bundler": "github:parcel-bundler/parcel#multi-entry"
}

prelude.min.js was not there (note: it's a file generated through yarn minify from parcel npm build step) so I had to force it.

[icai]

@devongovett support middleware as the following ❓

const bundler = new Bundler('./pages/**/*.html', {
  outFile: '*.html',
  publicUrl: './'
});

app.use(bundler.middleware());

https://en.parceljs.org/api.html#middleware

[nicolasdelfino]

@fathyb is it in fact #1090 or you think it's something else preventing the merge?

[tylerlong]

But now I have to access http://localhost:1234/index.html instead of http://localhost:1234.

Could it be a little smarter to know that I want index.html?

[yamsellem]

I don't find any mention of this (great) feature in the doc.
Do I miss something?

If I don't, maybe adding a line or two in the api section will greatly help (I've searched among github issues before discovering the feature was already there).

[safareli]

But now I have to access http://localhost:1234/index.html instead of http://localhost:1234.

is there an issue it?

[redbulled]

@devongovett thank you for such an amazing bundler.

Entry points can be passed to parcel as a list of files, or as a glob or list of globs. e.g. parcel *.html

pls write it somewhere on your site. Because it is such a great future and I was amazed when I found it

[matthewmueller]

But now I have to access http://localhost:1234/index.html instead of http://localhost:1234.

Second this.

parcel index.html correct resolves:

http://localhost:1234 => http://localhost:1234/index.html

parcel index.html app/index.html no longer resolves that. Should serve:

http://localhost:1234 => http://localhost:1234/index.html
http://localhost:1234/app => http://localhost:1234/app/index.html

[sgf]

waiting for use this feature 😂

[elsheepo]

when I bundle multiple entry points, I get my SCSS converted to CSS and bundled with bootstrap.css as expected and jquery.js/bootstrap.js/custom.js bundled on the first html file in alphabetical order, and the rest only HTML & JavaScript, it is not adding the <link href="{name}{hash}.css"> to subsequent pages.
I have tried these...
parcel *.html and parcel index.html about.html contact.html documentation.html repository.html

fyi: each page (index.html, about.html, etc) links to index.js like so...
<script src="./index.js"></script>

and the contents of index.js are...

import './vendor/bootstrap/css/bootstrap.min.css'
import './vendor/fontawesome-free/css/all.min.css'
import './scss/custom.scss'
import './vendor/jquery/jquery.min.js'
import './vendor/bootstrap/js/bootstrap.bundle.min.js'
import './js/custom.js'

So to reiterate, the first entry point (in alphabetical order, in my case it chooses about.html) gets links to both the bundled css & javascript, but the rest of the pages only get a link to the bundled javascript.

Here are the resulting about.html and index.html after having executed parcel *.html
notice how on line 16 of about.html a link is inserted into the <head> referring to the bundled css. Where as in subsequent html files, such as index.html there is not.

[ivanmalagon]

@elsheepo I have the same issue but in my case I could solve it writing <link href="../src/style/custom.scss" rel="stylesheet"> in each HTML instead of setting import './style/custom.scss in a JS file.
This way, the SCSS gets processed and added to every HTML file that uses it.

[wesbos]

I just added this to the docs. Would love to hear if anyone has a solution to the index.html no longer working with multiple entry points

[shaunakv1]

Looks like this is still an issue

parcel index.html report.html --https --open opens: https://localhost:1234 which doesn't work.

https://localhost:1234/index.html does however. It's a minor inconvenience, which only effects in dev mode, but def one that confuses others developers on the team when adding the multiple entry points for the first time. Plus now you have to go to the browser and type index.html

[matias89]

when I bundle multiple entry points, I get my SCSS converted to CSS and bundled with bootstrap.css as expected and jquery.js/bootstrap.js/custom.js bundled on the first html file in alphabetical order, and the rest only HTML & JavaScript, it is not adding the <link href="{name}{hash}.css"> to subsequent pages.
I have tried these...
parcel *.html and parcel index.html about.html contact.html documentation.html repository.html

fyi: each page (index.html, about.html, etc) links to index.js like so...
<script src="./index.js"></script>

and the contents of index.js are...

import './vendor/bootstrap/css/bootstrap.min.css'
import './vendor/fontawesome-free/css/all.min.css'
import './scss/custom.scss'
import './vendor/jquery/jquery.min.js'
import './vendor/bootstrap/js/bootstrap.bundle.min.js'
import './js/custom.js'

So to reiterate, the first entry point (in alphabetical order, in my case it chooses about.html) gets links to both the bundled css & javascript, but the rest of the pages only get a link to the bundled javascript.

Here are the resulting about.html and index.html after having executed parcel *.html
notice how on line 16 of about.html a link is inserted into the <head> referring to the bundled css. Where as in subsequent html files, such as index.html there is not.

Man, I had the same issue. I solved it doing this: instead of call index.js in each HTML file, I created a js for each html, and import index.js on each file.
In your case, you should create a home.js and about.js, and import in both index.js. Then, you should use <script src="./home.js"></script> in your index.html and <script src="./about.js"></script> in your about.html. This is the best solution that I found and works well. Best regards.

[ProLoser]

Doesn't multiple entrypoints require different respective exit points? I do not want all my entrypoints to yield one dist file.

Sometimes I'm transpiling a module or library and then converting it to a string to be injected at runtime. This is currently something I'm unable to do for parcel. Perhaps with a custom prefix? But then I cannot ship this code if it's consumed as esm

Alternatively, I use transpilation to pre-compile static versions of my page namespaced under a categorization folder and would like to run those in parallel.

I can do this with rollup (awkwardly) but cannot do it in Parcel

[devongovett]

You can do it with targets. Each target can have a source field that defines its entry point, and a top level field for the output or a distDir within the target. https://parceljs.org/features/targets/#package.json%23targets.*.source

[ProLoser]

Can you use glob patterns to handle a parallel series of sources with parallel targets (like statically generated variations of a website)

[rohit404404]

Looks like this is still an issue

parcel index.html report.html --https --open opens: https://localhost:1234 which doesn't work.

https://localhost:1234/index.html does however. It's a minor inconvenience, which only effects in dev mode, but def one that confuses others developers on the team when adding the multiple entry points for the first time. Plus now you have to go to the browser and type index.html

Any resolution to this issue yet? there is solution discussed here. HOwever, seems it does not work. https://stackoverflow.com/questions/69029045/deploying-problem-with-multiple-html-files-parcel

[wesbos]

No fix - I ended up having to move to Vite just to get this feature unfortunately

[ProLoser]

Vite is just roll-up with a bunch of defaults.

I ended up going back to basics and doing everything in roll-up and gulp for more granular control. KISS

Tired of wasting most of my time with build tooling instead of just building.