From 3acee5c70c47cc9a597762a425f26f233f001a39 Mon Sep 17 00:00:00 2001 From: samcic Date: Mon, 27 Dec 2021 17:50:01 +0100 Subject: [PATCH 1/7] Add context option to webpack config For achieving deterministic builds --- packages/ember-auto-import/ts/webpack.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts index 9dab5586f..cf0ae3fe4 100644 --- a/packages/ember-auto-import/ts/webpack.ts +++ b/packages/ember-auto-import/ts/webpack.ts @@ -129,6 +129,16 @@ export default class WebpackBundler extends Plugin implements Bundler { let config: Configuration = { mode: this.opts.environment === 'production' ? 'production' : 'development', entry, + // Pursuant to the webpack docs (https://webpack.js.org/configuration/entry-context/#context), + // we follow the recommendation to set the context, i.e. the absolute path for resolving + // entry points and loaders from the configuration. By doing this, the config becomes + // independent of the current working directory, and importantly ensures that we get DETERMINISTIC + // builds (i.e. produced assets have invariant content across repeated identical builds). + // If we didn't do this, the module names that webpack considers for computing the deterministic + // "moduleIds" (using the default moduleIds: "deterministic" option) would end up being + // based on broccoli temp-directory paths, which aren't deterministic across builds, and would + // hence cause output assets to also be non-deterministic. + context: stagingDir, performance: { hints: false, }, From 796e16515fe66d48d000609304b88f12e72fe5c3 Mon Sep 17 00:00:00 2001 From: Edward Faulkner Date: Wed, 29 Dec 2021 11:06:50 -0500 Subject: [PATCH 2/7] run prettier --- packages/ember-auto-import/ts/webpack.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts index cf0ae3fe4..2e396cacb 100644 --- a/packages/ember-auto-import/ts/webpack.ts +++ b/packages/ember-auto-import/ts/webpack.ts @@ -130,11 +130,11 @@ export default class WebpackBundler extends Plugin implements Bundler { mode: this.opts.environment === 'production' ? 'production' : 'development', entry, // Pursuant to the webpack docs (https://webpack.js.org/configuration/entry-context/#context), - // we follow the recommendation to set the context, i.e. the absolute path for resolving + // we follow the recommendation to set the context, i.e. the absolute path for resolving // entry points and loaders from the configuration. By doing this, the config becomes // independent of the current working directory, and importantly ensures that we get DETERMINISTIC // builds (i.e. produced assets have invariant content across repeated identical builds). - // If we didn't do this, the module names that webpack considers for computing the deterministic + // If we didn't do this, the module names that webpack considers for computing the deterministic // "moduleIds" (using the default moduleIds: "deterministic" option) would end up being // based on broccoli temp-directory paths, which aren't deterministic across builds, and would // hence cause output assets to also be non-deterministic. From 2505bda96d016b8aabe4a6b7135e91642942208b Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 12 Jan 2022 16:36:34 +0100 Subject: [PATCH 3/7] More --- package-lock.json | 15 ++++++++++++++- package.json | 3 ++- packages/ember-auto-import/ts/webpack.ts | 20 ++++++++++++++++++-- test-scenarios/package.json | 2 +- 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3998cb3e1..23931eb01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,8 @@ "eslint-plugin-ember": "^5.0.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-prettier": "^3.3.0", - "prettier": "^2.2.1" + "prettier": "^2.2.1", + "webpack-virtual-modules": "^0.4.3" } }, "node_modules/@babel/code-frame": { @@ -30991,6 +30992,12 @@ "node": ">=10.13.0" } }, + "node_modules/webpack-virtual-modules": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz", + "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==", + "dev": true + }, "node_modules/webpack/node_modules/enhanced-resolve": { "version": "5.8.3", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz", @@ -60584,6 +60591,12 @@ "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz", "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==" }, + "webpack-virtual-modules": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz", + "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==", + "dev": true + }, "websocket-driver": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", diff --git a/package.json b/package.json index 41a123941..4544d6c73 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "eslint-plugin-ember": "^5.0.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-prettier": "^3.3.0", - "prettier": "^2.2.1" + "prettier": "^2.2.1", + "webpack-virtual-modules": "^0.4.3" }, "volta": { "node": "14.16.0", diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts index 7fdbbbf04..a0ab7e6ba 100644 --- a/packages/ember-auto-import/ts/webpack.ts +++ b/packages/ember-auto-import/ts/webpack.ts @@ -1,7 +1,7 @@ import type { Configuration, Compiler, RuleSetRule, Stats } from 'webpack'; import { join, dirname } from 'path'; import { mergeWith, flatten, zip } from 'lodash'; -import { writeFileSync, realpathSync } from 'fs'; +import { writeFileSync, realpathSync, readFileSync } from 'fs'; import { compile, registerHelper } from 'handlebars'; import jsStringEscape from 'js-string-escape'; import { BundleDependencies, ResolvedTemplateImport } from './splitter'; @@ -14,6 +14,7 @@ import { PackageCache } from '@embroider/shared-internals'; import { Memoize } from 'typescript-memoize'; import makeDebug from 'debug'; import { ensureDirSync, symlinkSync, existsSync } from 'fs-extra'; +// import VirtualModulesPlugin from 'webpack-virtual-modules'; const debug = makeDebug('ember-auto-import:webpack'); @@ -124,11 +125,23 @@ export default class WebpackBundler extends Plugin implements Bundler { let entry: { [name: string]: string[] } = {}; this.opts.bundles.names.forEach((bundle) => { + // Struggling to know what I'm supposed to be doing in here: + // "bundle" seems to just be a name, like "app", and seems to come + // console.log(`l: ${readFileSync(join(stagingDir, )).length}`); + // console.log(`${bundle}: ${readFileSync(join(stagingDir, `${bundle}.js`)).length}`); + // console.log(`l: ${readFileSync('l.js').length}`); + console.log(`${bundle}: ${readFileSync(`./${bundle}.js`).length}`); entry[bundle] = [ join(stagingDir, 'l.js'), join(stagingDir, `${bundle}.js`), ]; }); + + // let virtualModules = new VirtualModulesPlugin({ + // 'node_modules/module-foo.js': 'module.exports = { foo: "foo" };', + // 'node_modules/module-bar.js': 'module.exports = { bar: "bar" };' + // }); + let config: Configuration = { mode: this.opts.environment === 'production' ? 'production' : 'development', @@ -142,7 +155,7 @@ export default class WebpackBundler extends Plugin implements Bundler { // "moduleIds" (using the default moduleIds: "deterministic" option) would end up being // based on broccoli temp-directory paths, which aren't deterministic across builds, and would // hence cause output assets to also be non-deterministic. - context: stagingDir, + // context: stagingDir, performance: { hints: false, }, @@ -206,6 +219,9 @@ export default class WebpackBundler extends Plugin implements Bundler { }, node: false, externals: this.externalsHandler, + plugins: [ + // virtualModules + ] }; mergeConfig( diff --git a/test-scenarios/package.json b/test-scenarios/package.json index 2a6c36ca5..f6591ae96 100644 --- a/test-scenarios/package.json +++ b/test-scenarios/package.json @@ -10,7 +10,7 @@ "jsdom": "^11.11.0" }, "scripts": { - "test": "qunit --require ts-node/register *-test.ts", + "test": "qunit --require ts-node/register *-test.ts --filter lts-common-chunk", "test:list": "scenario-tester list --require ts-node/register --files=*-test.ts", "test:output": "scenario-tester output --require ts-node/register --files=*-test.ts" }, From 343b76239a3869abb8c04174322097a1656dccb0 Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 15 Jan 2022 20:48:00 +0100 Subject: [PATCH 4/7] more experimenting --- packages/ember-auto-import/ts/webpack.ts | 55 ++++++++++++++++++------ 1 file changed, 42 insertions(+), 13 deletions(-) diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts index a0ab7e6ba..2440000f5 100644 --- a/packages/ember-auto-import/ts/webpack.ts +++ b/packages/ember-auto-import/ts/webpack.ts @@ -14,7 +14,7 @@ import { PackageCache } from '@embroider/shared-internals'; import { Memoize } from 'typescript-memoize'; import makeDebug from 'debug'; import { ensureDirSync, symlinkSync, existsSync } from 'fs-extra'; -// import VirtualModulesPlugin from 'webpack-virtual-modules'; +import VirtualModulesPlugin from 'webpack-virtual-modules'; const debug = makeDebug('ember-auto-import:webpack'); @@ -89,6 +89,8 @@ export default class WebpackBundler extends Plugin implements Bundler { private lastBuildResult: BuildResult | undefined; + private virtualModules; + constructor(priorTrees: InputNode[], private opts: BundlerOptions) { super(priorTrees, { persistentOutput: true, @@ -130,18 +132,12 @@ export default class WebpackBundler extends Plugin implements Bundler { // console.log(`l: ${readFileSync(join(stagingDir, )).length}`); // console.log(`${bundle}: ${readFileSync(join(stagingDir, `${bundle}.js`)).length}`); // console.log(`l: ${readFileSync('l.js').length}`); - console.log(`${bundle}: ${readFileSync(`./${bundle}.js`).length}`); + // console.log(`${bundle}: ${readFileSync(`./${bundle}.js`).length}`); entry[bundle] = [ - join(stagingDir, 'l.js'), - join(stagingDir, `${bundle}.js`), + `./__ember_auto_import__/l.js`, + `./__ember_auto_import__/${bundle}.js`, ]; }); - - // let virtualModules = new VirtualModulesPlugin({ - // 'node_modules/module-foo.js': 'module.exports = { foo: "foo" };', - // 'node_modules/module-bar.js': 'module.exports = { bar: "bar" };' - // }); - let config: Configuration = { mode: this.opts.environment === 'production' ? 'production' : 'development', @@ -220,7 +216,7 @@ export default class WebpackBundler extends Plugin implements Bundler { node: false, externals: this.externalsHandler, plugins: [ - // virtualModules + this.virtualModules ] }; @@ -315,10 +311,43 @@ export default class WebpackBundler extends Plugin implements Bundler { async build(): Promise { let bundleDeps = await this.opts.splitter.deps(); + let virtualModulesHash = {}; + + // let virtualModules = new VirtualModulesPlugin({ + // 'node_modules/module-foo.js': 'module.exports = { foo: "foo" };', + // 'node_modules/module-bar.js': 'module.exports = { bar: "bar" };' + // }); + for (let [bundle, deps] of bundleDeps.entries()) { - this.writeEntryFile(bundle, deps); + virtualModulesHash[`./__ember_auto_import__/${bundle}.js`] = entryTemplate({ + staticImports: deps.staticImports, + dynamicImports: deps.dynamicImports, + dynamicTemplateImports: + deps.dynamicTemplateImports.map(mapTemplateImports), + staticTemplateImports: + deps.staticTemplateImports.map(mapTemplateImports), + publicAssetURL: this.opts.publicAssetURL, + }); + + // join(this.stagingDir, `${bundle}.js`), + // entryTemplate({ + // staticImports: deps.staticImports, + // dynamicImports: deps.dynamicImports, + // dynamicTemplateImports: + // deps.dynamicTemplateImports.map(mapTemplateImports), + // staticTemplateImports: + // deps.staticTemplateImports.map(mapTemplateImports), + // publicAssetURL: this.opts.publicAssetURL, + // }) + + // this.writeEntryFile(bundle, deps); } - this.writeLoaderFile(); + + virtualModulesHash[`./__ember_auto_import__/l.js`] = loader; + + this.virtualModules = new VirtualModulesPlugin(virtualModulesHash); + + // this.writeLoaderFile(); this.linkDeps(bundleDeps); let stats = await this.runWebpack(); this.lastBuildResult = this.summarizeStats(stats, bundleDeps); From 6b1728ce3aadb091656af18c61fa76266f30001c Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 15 Jan 2022 20:53:44 +0100 Subject: [PATCH 5/7] more experimenting --- packages/ember-auto-import/ts/webpack.ts | 53 ++++++++++-------------- 1 file changed, 22 insertions(+), 31 deletions(-) diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts index 2440000f5..97e469d83 100644 --- a/packages/ember-auto-import/ts/webpack.ts +++ b/packages/ember-auto-import/ts/webpack.ts @@ -1,7 +1,7 @@ import type { Configuration, Compiler, RuleSetRule, Stats } from 'webpack'; import { join, dirname } from 'path'; import { mergeWith, flatten, zip } from 'lodash'; -import { writeFileSync, realpathSync, readFileSync } from 'fs'; +import { writeFileSync, realpathSync } from 'fs'; import { compile, registerHelper } from 'handlebars'; import jsStringEscape from 'js-string-escape'; import { BundleDependencies, ResolvedTemplateImport } from './splitter'; @@ -134,8 +134,10 @@ export default class WebpackBundler extends Plugin implements Bundler { // console.log(`l: ${readFileSync('l.js').length}`); // console.log(`${bundle}: ${readFileSync(`./${bundle}.js`).length}`); entry[bundle] = [ - `./__ember_auto_import__/l.js`, - `./__ember_auto_import__/${bundle}.js`, + join(stagingDir, 'l.js'), + join(stagingDir, `${bundle}.js`), + // `./__ember_auto_import__/l.js`, + // `./__ember_auto_import__/${bundle}.js`, ]; }); let config: Configuration = { @@ -215,9 +217,9 @@ export default class WebpackBundler extends Plugin implements Bundler { }, node: false, externals: this.externalsHandler, - plugins: [ - this.virtualModules - ] + // plugins: [ + // this.virtualModules + // ] }; mergeConfig( @@ -319,35 +321,24 @@ export default class WebpackBundler extends Plugin implements Bundler { // }); for (let [bundle, deps] of bundleDeps.entries()) { - virtualModulesHash[`./__ember_auto_import__/${bundle}.js`] = entryTemplate({ - staticImports: deps.staticImports, - dynamicImports: deps.dynamicImports, - dynamicTemplateImports: - deps.dynamicTemplateImports.map(mapTemplateImports), - staticTemplateImports: - deps.staticTemplateImports.map(mapTemplateImports), - publicAssetURL: this.opts.publicAssetURL, - }); - - // join(this.stagingDir, `${bundle}.js`), - // entryTemplate({ - // staticImports: deps.staticImports, - // dynamicImports: deps.dynamicImports, - // dynamicTemplateImports: - // deps.dynamicTemplateImports.map(mapTemplateImports), - // staticTemplateImports: - // deps.staticTemplateImports.map(mapTemplateImports), - // publicAssetURL: this.opts.publicAssetURL, - // }) - - // this.writeEntryFile(bundle, deps); + // virtualModulesHash[`./__ember_auto_import__/${bundle}.js`] = entryTemplate({ + // staticImports: deps.staticImports, + // dynamicImports: deps.dynamicImports, + // dynamicTemplateImports: + // deps.dynamicTemplateImports.map(mapTemplateImports), + // staticTemplateImports: + // deps.staticTemplateImports.map(mapTemplateImports), + // publicAssetURL: this.opts.publicAssetURL, + // }); + + this.writeEntryFile(bundle, deps); } - virtualModulesHash[`./__ember_auto_import__/l.js`] = loader; + // virtualModulesHash[`./__ember_auto_import__/l.js`] = loader; + this.writeLoaderFile(); - this.virtualModules = new VirtualModulesPlugin(virtualModulesHash); + // this.virtualModules = new VirtualModulesPlugin(virtualModulesHash); - // this.writeLoaderFile(); this.linkDeps(bundleDeps); let stats = await this.runWebpack(); this.lastBuildResult = this.summarizeStats(stats, bundleDeps); From 71ba528aece2ca050e285f8d7c77f7c45a815dd3 Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 15 Jan 2022 21:56:29 +0100 Subject: [PATCH 6/7] more experimenting --- packages/ember-auto-import/ts/webpack.ts | 70 ++++++++++-------------- 1 file changed, 29 insertions(+), 41 deletions(-) diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts index 97e469d83..3b762bd84 100644 --- a/packages/ember-auto-import/ts/webpack.ts +++ b/packages/ember-auto-import/ts/webpack.ts @@ -14,10 +14,12 @@ import { PackageCache } from '@embroider/shared-internals'; import { Memoize } from 'typescript-memoize'; import makeDebug from 'debug'; import { ensureDirSync, symlinkSync, existsSync } from 'fs-extra'; -import VirtualModulesPlugin from 'webpack-virtual-modules'; const debug = makeDebug('ember-auto-import:webpack'); +var VirtualModulesPlugin = require('webpack-virtual-modules'); +var webpack = require('webpack'); + registerHelper('js-string-escape', jsStringEscape); registerHelper('join', function (list, connector) { return list.join(connector); @@ -127,33 +129,19 @@ export default class WebpackBundler extends Plugin implements Bundler { let entry: { [name: string]: string[] } = {}; this.opts.bundles.names.forEach((bundle) => { - // Struggling to know what I'm supposed to be doing in here: - // "bundle" seems to just be a name, like "app", and seems to come - // console.log(`l: ${readFileSync(join(stagingDir, )).length}`); - // console.log(`${bundle}: ${readFileSync(join(stagingDir, `${bundle}.js`)).length}`); - // console.log(`l: ${readFileSync('l.js').length}`); - // console.log(`${bundle}: ${readFileSync(`./${bundle}.js`).length}`); entry[bundle] = [ join(stagingDir, 'l.js'), join(stagingDir, `${bundle}.js`), + // If I understand correctly, our virtual modules will need to go in here... // `./__ember_auto_import__/l.js`, // `./__ember_auto_import__/${bundle}.js`, ]; }); + let config: Configuration = { mode: this.opts.environment === 'production' ? 'production' : 'development', entry, - // Pursuant to the webpack docs (https://webpack.js.org/configuration/entry-context/#context), - // we follow the recommendation to set the context, i.e. the absolute path for resolving - // entry points and loaders from the configuration. By doing this, the config becomes - // independent of the current working directory, and importantly ensures that we get DETERMINISTIC - // builds (i.e. produced assets have invariant content across repeated identical builds). - // If we didn't do this, the module names that webpack considers for computing the deterministic - // "moduleIds" (using the default moduleIds: "deterministic" option) would end up being - // based on broccoli temp-directory paths, which aren't deterministic across builds, and would - // hence cause output assets to also be non-deterministic. - // context: stagingDir, performance: { hints: false, }, @@ -193,7 +181,7 @@ export default class WebpackBundler extends Plugin implements Bundler { ), }, module: { - noParse: (file: string) => file === join(stagingDir, 'l.js'), + noParse: (file: string) => file === join(stagingDir, 'l.js') || file === `./__ember_auto_import__/l.js`, rules: [ this.babelRule(stagingDir), { @@ -217,9 +205,9 @@ export default class WebpackBundler extends Plugin implements Bundler { }, node: false, externals: this.externalsHandler, - // plugins: [ - // this.virtualModules - // ] + plugins: [ + this.virtualModules + ] }; mergeConfig( @@ -256,7 +244,9 @@ export default class WebpackBundler extends Plugin implements Bundler { // // And we otherwise defer to the `skipBabel` setting as implemented by // `@embroider/shared-internals`. - return dirname(filename) !== stagingDir && shouldTranspile(filename); + return dirname(filename) !== stagingDir + && filename.indexOf('/__ember_auto_import__/')<0 + && shouldTranspile(filename); }, use: { loader: 'babel-loader-8', @@ -311,34 +301,31 @@ export default class WebpackBundler extends Plugin implements Bundler { } async build(): Promise { + // This runs BEFORE our setup() method above + let bundleDeps = await this.opts.splitter.deps(); + // Build our virtual modules which we'll pass into the webpack plugins array let virtualModulesHash = {}; - - // let virtualModules = new VirtualModulesPlugin({ - // 'node_modules/module-foo.js': 'module.exports = { foo: "foo" };', - // 'node_modules/module-bar.js': 'module.exports = { bar: "bar" };' - // }); - for (let [bundle, deps] of bundleDeps.entries()) { - // virtualModulesHash[`./__ember_auto_import__/${bundle}.js`] = entryTemplate({ - // staticImports: deps.staticImports, - // dynamicImports: deps.dynamicImports, - // dynamicTemplateImports: - // deps.dynamicTemplateImports.map(mapTemplateImports), - // staticTemplateImports: - // deps.staticTemplateImports.map(mapTemplateImports), - // publicAssetURL: this.opts.publicAssetURL, - // }); + virtualModulesHash[`./__ember_auto_import__/${bundle}.js`] = entryTemplate({ + staticImports: deps.staticImports, + dynamicImports: deps.dynamicImports, + dynamicTemplateImports: + deps.dynamicTemplateImports.map(mapTemplateImports), + staticTemplateImports: + deps.staticTemplateImports.map(mapTemplateImports), + publicAssetURL: this.opts.publicAssetURL, + }); + } + virtualModulesHash[`./__ember_auto_import__/l.js`] = loader; + this.virtualModules = new VirtualModulesPlugin(virtualModulesHash); + for (let [bundle, deps] of bundleDeps.entries()) { this.writeEntryFile(bundle, deps); } - - // virtualModulesHash[`./__ember_auto_import__/l.js`] = loader; this.writeLoaderFile(); - // this.virtualModules = new VirtualModulesPlugin(virtualModulesHash); - this.linkDeps(bundleDeps); let stats = await this.runWebpack(); this.lastBuildResult = this.summarizeStats(stats, bundleDeps); @@ -437,6 +424,7 @@ export default class WebpackBundler extends Plugin implements Bundler { packageName: string; packageRoot: string; }): void { + // I guess this is "part 2" of what stagingDir is being used for. Not yet sure how to replace this part... ensureDirSync(dirname(join(this.stagingDir, 'node_modules', packageName))); if (!existsSync(join(this.stagingDir, 'node_modules', packageName))) { symlinkSync( From 9389d4a47caea41c98b94a7f89d0ec5250aa57ca Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 15 Jan 2022 22:00:45 +0100 Subject: [PATCH 7/7] more experimenting --- packages/ember-auto-import/ts/webpack.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/ember-auto-import/ts/webpack.ts b/packages/ember-auto-import/ts/webpack.ts index 3b762bd84..b973f2448 100644 --- a/packages/ember-auto-import/ts/webpack.ts +++ b/packages/ember-auto-import/ts/webpack.ts @@ -14,12 +14,10 @@ import { PackageCache } from '@embroider/shared-internals'; import { Memoize } from 'typescript-memoize'; import makeDebug from 'debug'; import { ensureDirSync, symlinkSync, existsSync } from 'fs-extra'; +import VirtualModulesPlugin from 'webpack-virtual-modules'; const debug = makeDebug('ember-auto-import:webpack'); -var VirtualModulesPlugin = require('webpack-virtual-modules'); -var webpack = require('webpack'); - registerHelper('js-string-escape', jsStringEscape); registerHelper('join', function (list, connector) { return list.join(connector); @@ -181,6 +179,8 @@ export default class WebpackBundler extends Plugin implements Bundler { ), }, module: { + // I guess webpack should also be prevented from parsing our virtual modules, so presumably we could + // filter them out like this? noParse: (file: string) => file === join(stagingDir, 'l.js') || file === `./__ember_auto_import__/l.js`, rules: [ this.babelRule(stagingDir), @@ -205,6 +205,7 @@ export default class WebpackBundler extends Plugin implements Bundler { }, node: false, externals: this.externalsHandler, + // Here we add our virtual modules as per https://github.com/sysgears/webpack-virtual-modules plugins: [ this.virtualModules ] @@ -245,6 +246,7 @@ export default class WebpackBundler extends Plugin implements Bundler { // And we otherwise defer to the `skipBabel` setting as implemented by // `@embroider/shared-internals`. return dirname(filename) !== stagingDir + // I presume we also don't want to apply babel to our virtual modules, which I guess could be done as follows... && filename.indexOf('/__ember_auto_import__/')<0 && shouldTranspile(filename); }, @@ -301,8 +303,6 @@ export default class WebpackBundler extends Plugin implements Bundler { } async build(): Promise { - // This runs BEFORE our setup() method above - let bundleDeps = await this.opts.splitter.deps(); // Build our virtual modules which we'll pass into the webpack plugins array