Parcel multiple entry points for Google Chrome extension

Question

I'm creating a new Chrome extension. I introduced Parcel bundler for module bundling and TypeScript support.

I want build

/src
  /background-script
    index.ts
  /browser-action
    index.html
    index.ts
  /content-script
    index.ts

into

/dist
  /background-script
    index.js
  /browser-action
    index.html
    index.js
  /content-script
    index.js

/src/index.html imports index.ts in the same directory

parcel watch src/background-script/index.ts src/content-script/index.ts src/browser-action/index.html --no-hmr --out-dir dist --public-url .

This will produce following output:

/dist
  /background-script
    index.js
  /browser-action
    index.html
  /content-script
    index.js
  browser-action.***.js

Answer 1

Try using something like this in package.json:

"build": "parcel build ./src/**/main.js ./src/**/main.scss --out-dir build --no-content-hash --no-source-maps",

It will take something like:

/src
  /project1
    /components
      utils.js
      constants.js
    main.js

  /project2
    main.js

In projects1 main.js is importing utils.js and constants.js and does some other stuff. Then the build command runs, it will minify, polyfill, transpile into the main.js file in the /build folder.

And will generate a folder structure like:

/build
  /project1
    main.js
  /project2
    main.js