From 35d13f561c108eb15f4ef771f1070b6e76c1cde4 Mon Sep 17 00:00:00 2001 From: ScriptedAlchemy Date: Wed, 2 Oct 2019 15:31:56 -0700 Subject: [PATCH 1/5] fix: chunk splitting needs to be set to all --- src/webpack/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webpack/index.js b/src/webpack/index.js index 7a5257ba..fcc3711e 100644 --- a/src/webpack/index.js +++ b/src/webpack/index.js @@ -154,7 +154,7 @@ class URLImportPlugin { runtimeChunk: 'multiple', namedModules: true, splitChunks: { - chunks: options?.optimization?.splitChunks?.chunks || 'all', + chunks: 'all', cacheGroups: chunkSplitting, }, }, From bb8403de8fafeabefbb76d2298d0c0e8678dee4f Mon Sep 17 00:00:00 2001 From: ScriptedAlchemy Date: Fri, 1 Nov 2019 10:01:50 -0700 Subject: [PATCH 2/5] fix: making resource path dynamic --- README.md | 7 +++++++ src/webpack/index.js | 33 +++++++++++++++++---------------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 970e86c1..2733460a 100644 --- a/README.md +++ b/README.md @@ -451,6 +451,13 @@ Type: `Function(FileDescriptor): Boolean` Filter out files. [FileDescriptor typings](#filedescriptor) +### `options.testPath` + +Type: `Function(Object, FileDescriptor): Object`
+Default: `src` + +Test resource path to see if plugin should apply transformations + ### `options.map` diff --git a/src/webpack/index.js b/src/webpack/index.js index fcc3711e..34a3535d 100644 --- a/src/webpack/index.js +++ b/src/webpack/index.js @@ -60,28 +60,25 @@ function hasExternalizedModule(module) { return false; } -const interleaveConfig = { +const interleaveConfig = test => ({ test(module) { if (module.resource) { - return module.resource.includes('src') && !!hasExternalizedModule(module); + return module.resource.includes(test) && !!hasExternalizedModule(module); } }, name(module, chunks, cacheGroupKey) { - // dont chunk unless we are sure you can + // dont chunk unless we are sure you can const moduleSource = hasExternalizedModule(module); if (moduleSource) { - // module.originalSource().source((dependencyTemplates, runtimeTemplate, type = "javascript") =>{ - // return NormalModule - // return - // }) return moduleSource.match(/\/\*\s*externalize\s*:\s*(\S+)\s*\*\//)[1]; } - // returning a chunk name causes problems with mini-css popping chunks off - // return 'main'; + // returning a chunk name causes problems with mini-css popping chunks off + // return 'main'; }, enforce: true, -}; + reuseExistingChunk: false, +}); function performInterleave() { @@ -101,6 +98,7 @@ class URLImportPlugin { this.opts = Object.assign({ publicPath: null, debug: debug || false, + testPath: 'src', basePath: '', manifestName: 'unknown-project', fileName: 'importManifest.js', @@ -140,11 +138,11 @@ class URLImportPlugin { } const options = compiler?.options; const chunkSplitting = options?.optimization?.splitChunks?.cacheGroups || {}; - chunkSplitting.interleave = interleaveConfig; + chunkSplitting.interleave = interleaveConfig(testPath); if (this.opts.debug) { console.groupCollapsed('interleaveConfig'); - console.log(interleaveConfig); + console.log(chunkSplitting.interleave); console.groupEnd(); console.groupCollapsed('New webpack optimization config'); } @@ -159,9 +157,13 @@ class URLImportPlugin { }, }, }); - + Object.assign(options.optimization.splitChunks, { + chunks: 'all', + cacheGroups: chunkSplitting, + namedModules: true, + }); if (this.opts.debug) { - console.log(options.optimization); + console.log(options); console.groupEnd(); } @@ -222,7 +224,6 @@ class URLImportPlugin { let files = compilation.chunks.reduce((files, chunk) => chunk.files.reduce((files, path) => { let name = chunk.name ? chunk.name : null; const dependencyChains = {}; - if (name) { name = `${name}.${this.getFileType(path)}`; } else { @@ -434,7 +435,7 @@ class URLImportPlugin { const isLastEmit = emitCount === 0; if (isLastEmit) { const cleanedManifest = Object.entries(manifest) - .reduce((acc, [key, asset]) => {console.log(asset); + .reduce((acc, [key, asset]) => { if (!asset?.path?.includes('.map')) { return Object.assign(acc, { [key]: asset }); } From 44a657a8c53d2de2366acc7bed844772dcea8b9d Mon Sep 17 00:00:00 2001 From: ScriptedAlchemy Date: Fri, 1 Nov 2019 10:02:25 -0700 Subject: [PATCH 3/5] fix: making resource path dynamic --- README.md | 2 +- src/webpack/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2733460a..3dbc336b 100644 --- a/README.md +++ b/README.md @@ -451,7 +451,7 @@ Type: `Function(FileDescriptor): Boolean` Filter out files. [FileDescriptor typings](#filedescriptor) -### `options.testPath` +### `options.test` Type: `Function(Object, FileDescriptor): Object`
Default: `src` diff --git a/src/webpack/index.js b/src/webpack/index.js index 34a3535d..7e42cc1c 100644 --- a/src/webpack/index.js +++ b/src/webpack/index.js @@ -98,7 +98,7 @@ class URLImportPlugin { this.opts = Object.assign({ publicPath: null, debug: debug || false, - testPath: 'src', + test: 'src', basePath: '', manifestName: 'unknown-project', fileName: 'importManifest.js', @@ -138,7 +138,7 @@ class URLImportPlugin { } const options = compiler?.options; const chunkSplitting = options?.optimization?.splitChunks?.cacheGroups || {}; - chunkSplitting.interleave = interleaveConfig(testPath); + chunkSplitting.interleave = interleaveConfig(test); if (this.opts.debug) { console.groupCollapsed('interleaveConfig'); From e1814fdc740c471de31c095f92dda865af9ba02c Mon Sep 17 00:00:00 2001 From: ScriptedAlchemy Date: Fri, 1 Nov 2019 10:04:07 -0700 Subject: [PATCH 4/5] fix: making resource path dynamic --- src/webpack/index.js | 106 +++++++++++++++++++++---------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/src/webpack/index.js b/src/webpack/index.js index 7e42cc1c..9e9601fa 100644 --- a/src/webpack/index.js +++ b/src/webpack/index.js @@ -35,7 +35,7 @@ const removeNull = function () { if (nullCount == length) { this.length = 0; return this; } // mix of null // non-null let idest = 0; let - isrc = length - 1; + isrc = length - 1; length -= nullCount; while (true) { while (!this[isrc]) { isrc--; nullCount--; } // find a non null (source) slot on the right @@ -91,14 +91,14 @@ class URLImportPlugin { || /--debug|--inspect/.test(process.execArgv.join(' ')); if (!opts.manifestName) { throw new Error( - 'URLImportPlugin: You MUST specify a manifestName in your options. Something unique. Like {manifestName: my-special-build}', + 'URLImportPlugin: You MUST specify a manifestName in your options. Something unique. Like {manifestName: my-special-build}', ); } this.opts = Object.assign({ publicPath: null, debug: debug || false, - test: 'src', + testPath: 'src', basePath: '', manifestName: 'unknown-project', fileName: 'importManifest.js', @@ -114,9 +114,9 @@ class URLImportPlugin { sort: null, hashFunction: 'md4', serialize: manifest => `if(!window.entryManifest) {window.entryManifest = {}}; window.entryManifest["${opts.manifestName}"] = ${JSON.stringify( - manifest, - null, - 2, + manifest, + null, + 2, )}`, }, opts || {}); } @@ -138,7 +138,7 @@ class URLImportPlugin { } const options = compiler?.options; const chunkSplitting = options?.optimization?.splitChunks?.cacheGroups || {}; - chunkSplitting.interleave = interleaveConfig(test); + chunkSplitting.interleave = interleaveConfig(this.opts.test); if (this.opts.debug) { console.groupCollapsed('interleaveConfig'); @@ -194,8 +194,8 @@ class URLImportPlugin { const moduleAsset = ({ userRequest }, file) => { if (userRequest) { moduleAssets[file] = path.join( - path.dirname(file), - path.basename(userRequest), + path.dirname(file), + path.basename(userRequest), ); } }; @@ -210,7 +210,7 @@ class URLImportPlugin { const publicPath = this.opts.publicPath != null ? this.opts.publicPath : compilation.options.output.publicPath; const stats = compilation.getStats() - .toJson(); + .toJson(); if (this.opts.debug) { console.groupCollapsed('Initial webpack stats'); @@ -435,12 +435,12 @@ class URLImportPlugin { const isLastEmit = emitCount === 0; if (isLastEmit) { const cleanedManifest = Object.entries(manifest) - .reduce((acc, [key, asset]) => { - if (!asset?.path?.includes('.map')) { - return Object.assign(acc, { [key]: asset }); - } - return acc; - }, {}); + .reduce((acc, [key, asset]) => { + if (!asset?.path?.includes('.map')) { + return Object.assign(acc, { [key]: asset }); + } + return acc; + }, {}); const output = this.opts.serialize(cleanedManifest); console.log('Output:', output); @@ -462,9 +462,9 @@ class URLImportPlugin { compiler.hooks.webpackURLImportPluginAfterEmit.call(manifest); } else { compilation.applyPluginsAsync( - 'webpack-manifest-plugin-after-emit', - manifest, - compileCallback, + 'webpack-manifest-plugin-after-emit', + manifest, + compileCallback, ); } }; @@ -491,47 +491,47 @@ class URLImportPlugin { compiler.hooks.compilation.tap('URLImportPlugin', (compilation) => { const usedIds = new Set(); compilation.hooks.beforeModuleIds.tap( - 'URLImportPlugin', - (modules) => { - for (const module of modules) { - if (module.id === null && module.resource) { - const hash = createHash(this.opts.hashFunction); - - let resourcePath = module.resource; - if (resourcePath.indexOf('?') > -1) { - resourcePath = resourcePath.split('?')[0]; - } + 'URLImportPlugin', + (modules) => { + for (const module of modules) { + if (module.id === null && module.resource) { + const hash = createHash(this.opts.hashFunction); + + let resourcePath = module.resource; + if (resourcePath.indexOf('?') > -1) { + resourcePath = resourcePath.split('?')[0]; + } - try { - hash.update(fs.readFileSync(resourcePath)); - } catch (ex) { - console.error('failed on', module.context, module.resource); - throw ex; - } + try { + hash.update(fs.readFileSync(resourcePath)); + } catch (ex) { + console.error('failed on', module.context, module.resource); + throw ex; + } - const hashId = hash.digest(this.opts.hashDigest); - let len = this.opts.hashDigestLength; - while (usedIds.has(hashId.substr(0, len))) { - len++; + const hashId = hash.digest(this.opts.hashDigest); + let len = this.opts.hashDigestLength; + while (usedIds.has(hashId.substr(0, len))) { + len++; + } + module.id = hashId.substr(0, len); + usedIds.add(module.id); } - module.id = hashId.substr(0, len); - usedIds.add(module.id); - } - const moduleSource = module?.originalSource?.().source?.() || ''; - if (moduleSource?.indexOf('externalize') > -1 || false) { - module.buildMeta = mergeDeep(module.buildMeta, { isExternalized: true }); + const moduleSource = module?.originalSource?.().source?.() || ''; + if (moduleSource?.indexOf('externalize') > -1 || false) { + module.buildMeta = mergeDeep(module.buildMeta, { isExternalized: true }); - try { - // look at refactoring this to use buildMeta not mutate id - module.id = moduleSource.match(/\/\*\s*externalize\s*:\s*(\S+)\s*\*\//)[1]; - externalModules[module.id] = {}; - } catch (error) { - throw new Error('external-import', error.message); + try { + // look at refactoring this to use buildMeta not mutate id + module.id = moduleSource.match(/\/\*\s*externalize\s*:\s*(\S+)\s*\*\//)[1]; + externalModules[module.id] = {}; + } catch (error) { + throw new Error('external-import', error.message); + } } } - } - }, + }, ); }); From 9e96c654977818817a6a9c8d0132c537b4a24f88 Mon Sep 17 00:00:00 2001 From: ScriptedAlchemy Date: Fri, 1 Nov 2019 10:19:07 -0700 Subject: [PATCH 5/5] style: linting --- src/webpack/index.js | 102 +++++++++++++++++++++---------------------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/src/webpack/index.js b/src/webpack/index.js index 9e9601fa..6b3739ba 100644 --- a/src/webpack/index.js +++ b/src/webpack/index.js @@ -35,7 +35,7 @@ const removeNull = function () { if (nullCount == length) { this.length = 0; return this; } // mix of null // non-null let idest = 0; let - isrc = length - 1; + isrc = length - 1; length -= nullCount; while (true) { while (!this[isrc]) { isrc--; nullCount--; } // find a non null (source) slot on the right @@ -91,7 +91,7 @@ class URLImportPlugin { || /--debug|--inspect/.test(process.execArgv.join(' ')); if (!opts.manifestName) { throw new Error( - 'URLImportPlugin: You MUST specify a manifestName in your options. Something unique. Like {manifestName: my-special-build}', + 'URLImportPlugin: You MUST specify a manifestName in your options. Something unique. Like {manifestName: my-special-build}', ); } @@ -114,9 +114,9 @@ class URLImportPlugin { sort: null, hashFunction: 'md4', serialize: manifest => `if(!window.entryManifest) {window.entryManifest = {}}; window.entryManifest["${opts.manifestName}"] = ${JSON.stringify( - manifest, - null, - 2, + manifest, + null, + 2, )}`, }, opts || {}); } @@ -194,8 +194,8 @@ class URLImportPlugin { const moduleAsset = ({ userRequest }, file) => { if (userRequest) { moduleAssets[file] = path.join( - path.dirname(file), - path.basename(userRequest), + path.dirname(file), + path.basename(userRequest), ); } }; @@ -210,7 +210,7 @@ class URLImportPlugin { const publicPath = this.opts.publicPath != null ? this.opts.publicPath : compilation.options.output.publicPath; const stats = compilation.getStats() - .toJson(); + .toJson(); if (this.opts.debug) { console.groupCollapsed('Initial webpack stats'); @@ -435,12 +435,12 @@ class URLImportPlugin { const isLastEmit = emitCount === 0; if (isLastEmit) { const cleanedManifest = Object.entries(manifest) - .reduce((acc, [key, asset]) => { - if (!asset?.path?.includes('.map')) { - return Object.assign(acc, { [key]: asset }); - } - return acc; - }, {}); + .reduce((acc, [key, asset]) => { + if (!asset?.path?.includes('.map')) { + return Object.assign(acc, { [key]: asset }); + } + return acc; + }, {}); const output = this.opts.serialize(cleanedManifest); console.log('Output:', output); @@ -462,9 +462,9 @@ class URLImportPlugin { compiler.hooks.webpackURLImportPluginAfterEmit.call(manifest); } else { compilation.applyPluginsAsync( - 'webpack-manifest-plugin-after-emit', - manifest, - compileCallback, + 'webpack-manifest-plugin-after-emit', + manifest, + compileCallback, ); } }; @@ -491,47 +491,47 @@ class URLImportPlugin { compiler.hooks.compilation.tap('URLImportPlugin', (compilation) => { const usedIds = new Set(); compilation.hooks.beforeModuleIds.tap( - 'URLImportPlugin', - (modules) => { - for (const module of modules) { - if (module.id === null && module.resource) { - const hash = createHash(this.opts.hashFunction); - - let resourcePath = module.resource; - if (resourcePath.indexOf('?') > -1) { - resourcePath = resourcePath.split('?')[0]; - } + 'URLImportPlugin', + (modules) => { + for (const module of modules) { + if (module.id === null && module.resource) { + const hash = createHash(this.opts.hashFunction); + + let resourcePath = module.resource; + if (resourcePath.indexOf('?') > -1) { + resourcePath = resourcePath.split('?')[0]; + } - try { - hash.update(fs.readFileSync(resourcePath)); - } catch (ex) { - console.error('failed on', module.context, module.resource); - throw ex; - } + try { + hash.update(fs.readFileSync(resourcePath)); + } catch (ex) { + console.error('failed on', module.context, module.resource); + throw ex; + } - const hashId = hash.digest(this.opts.hashDigest); - let len = this.opts.hashDigestLength; - while (usedIds.has(hashId.substr(0, len))) { - len++; - } - module.id = hashId.substr(0, len); - usedIds.add(module.id); + const hashId = hash.digest(this.opts.hashDigest); + let len = this.opts.hashDigestLength; + while (usedIds.has(hashId.substr(0, len))) { + len++; } - const moduleSource = module?.originalSource?.().source?.() || ''; - if (moduleSource?.indexOf('externalize') > -1 || false) { - module.buildMeta = mergeDeep(module.buildMeta, { isExternalized: true }); + module.id = hashId.substr(0, len); + usedIds.add(module.id); + } + const moduleSource = module?.originalSource?.().source?.() || ''; + if (moduleSource?.indexOf('externalize') > -1 || false) { + module.buildMeta = mergeDeep(module.buildMeta, { isExternalized: true }); - try { - // look at refactoring this to use buildMeta not mutate id - module.id = moduleSource.match(/\/\*\s*externalize\s*:\s*(\S+)\s*\*\//)[1]; - externalModules[module.id] = {}; - } catch (error) { - throw new Error('external-import', error.message); - } + try { + // look at refactoring this to use buildMeta not mutate id + module.id = moduleSource.match(/\/\*\s*externalize\s*:\s*(\S+)\s*\*\//)[1]; + externalModules[module.id] = {}; + } catch (error) { + throw new Error('external-import', error.message); } } - }, + } + }, ); });