1

Given most browsers now support native ES6 modules and coupled with HTTP/2 capabilities it is practical to load unbundled ES6 modules in these browsers but with a fallback using the script tag nomodule attribute for other browsers.

Based on this I am looking to configure webpack to do just this; so that as well as doing the usual bundling (e.g. producing app.bundle.js) it also copies the ES6 modules to the output folder and updates the import urls (can assume that all JS code is using imports that are themselves ES6 modules - obviously commonJS/UMD transpiling would be nice until everyone provides ES6 module packages in npm).

My thoughts are that webpack can just copy these imported modules to the output folder (use the copy plugin) whilst at the same time updating the import urls, so for example if I had:

import _ from "lodash-es";

Webpack should copy the node_modules/lodash-es folder to the 'modules' folder in the output folder and rewrite the import to something like below (the output location would obviously be configurable):

import _ from "./modules/lodash-es"

I'm not seeing any easy solutions to this problem (which I can only imagine will become more common as people adopt native ES6 modules); I'm going to continue work on a solution that fits my needs and will document here but if anyone out there has a working solution to this problem or a link to one then please let us know as I'm hopefully not the only person trying to solve this.

RichTurner
  • 797
  • 7
  • 14

1 Answers1

1

Having spent too long trying to get something working I decided to stick with the usual bundle approach for now; will be interesting to see how the W3C standards tackle the ES6 module resolution issue (I know google have proposed a mapping file) I guess once that is figured out we might see solutions appearing for this problem.

RichTurner
  • 797
  • 7
  • 14