diff --git a/web/webpack.config.js b/web/webpack.config.js index 3cffcf63..14201de3 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -11,7 +11,13 @@ module.exports = (env, argv) => { filename: 'scripts/[name].js', }, externals: { - // Schemas lib external to this webpack build. Imported in html file. + // Without declaring `schemas` as external, Webpack will attempt to look + // for the `schemas` library and bundle it. However, we want our schemas + // bundle to be separate from this one. This external config tells webpack + // that the schemas library will instead be supplied at runtime. External + // libraries can be provided in multiple ways, but we provide it through a + // script reference in the HTML file outputted by this bundle. + // https://webpack.js.org/configuration/externals/#externals schemas: 'schemas', }, plugins: [ @@ -57,16 +63,17 @@ module.exports = (env, argv) => { // Difficult to run two webpack instances on a single dev server (i.e., this // file, and the other webpack file that builds schemas). So for dev servers, - // we will insert all schema content into the webpack build generated by this - // file, and this singular build serves the entirety of the application. This - // is fine, because the whole point of having a separate build for schema - // content was to reduce production build times when users are only editing - // schema files (and not the rest of the application), but the dev server - // already gets around this problem through hot loading. + // we will stick to a singular build that concatenates both application and + // schema content. This is fine, because the whole point of having a separate + // build for schema content was to reduce production build times when users + // are only editing schema files (and not the rest of the application), but + // the dev server already gets around this problem through hot loading. if (argv.mode === 'development') { config.devtool = 'eval-source-map'; - // The schemas lib will come from a direct import of the javascript, instead - // of embedding an external lib into the html + // The external schemas lib is replaced by a direct reference to the + // schemas entrypoint. When you directly reference the schemas entrypoint in + // this bundle, a separate schemas library is not needed, because this + // bundle will now include all schema content as well. config.resolve = { alias: { schemas: path.resolve(__dirname, 'schemas.js'),