diff --git a/docs/rules/dynamic-import-chunkname.md b/docs/rules/dynamic-import-chunkname.md index 35ae9df51..dd526c891 100644 --- a/docs/rules/dynamic-import-chunkname.md +++ b/docs/rules/dynamic-import-chunkname.md @@ -15,7 +15,8 @@ You can also configure the regex format you'd like to accept for the webpackChun { "dynamic-import-chunkname": [2, { importFunctions: ["dynamicImport"], - webpackChunknameFormat: "[a-zA-Z0-57-9-/_]+" + webpackChunknameFormat: "[a-zA-Z0-57-9-/_]+", + allowEmpty: false }] } ``` @@ -87,6 +88,38 @@ The following patterns are valid: ); ``` +### `allowEmpty: true` + +If you want to allow dynamic imports without a webpackChunkName, you can set `allowEmpty: true` in the rule config. This will allow dynamic imports without a leading comment, or with a leading comment that does not contain a webpackChunkName. + +Given `{ "allowEmpty": true }`: + + +### valid + +The following patterns are valid: + +```javascript +import('someModule'); + +import( + /* webpackChunkName: "someModule" */ + 'someModule', +); +``` + +### invalid + +The following patterns are invalid: + +```javascript +// incorrectly formatted comment +import( + /*webpackChunkName:"someModule"*/ + 'someModule', +); +``` + ## When Not To Use It If you don't care that webpack will autogenerate chunk names and may blow up browser caches and bundle size reports. diff --git a/src/rules/dynamic-import-chunkname.js b/src/rules/dynamic-import-chunkname.js index 96ceff2e1..a62e5c6c1 100644 --- a/src/rules/dynamic-import-chunkname.js +++ b/src/rules/dynamic-import-chunkname.js @@ -19,6 +19,9 @@ module.exports = { type: 'string', }, }, + allowEmpty: { + type: 'boolean', + }, webpackChunknameFormat: { type: 'string', }, @@ -28,7 +31,7 @@ module.exports = { create(context) { const config = context.options[0]; - const { importFunctions = [] } = config || {}; + const { importFunctions = [], allowEmpty = false } = config || {}; const { webpackChunknameFormat = '([0-9a-zA-Z-_/.]|\\[(request|index)\\])+' } = config || {}; const paddedCommentRegex = /^ (\S[\s\S]+\S) $/; @@ -42,7 +45,7 @@ module.exports = { ? sourceCode.getCommentsBefore(arg) // This method is available in ESLint >= 4. : sourceCode.getComments(arg).leading; // This method is deprecated in ESLint 7. - if (!leadingComments || leadingComments.length === 0) { + if ((!leadingComments || leadingComments.length === 0) && !allowEmpty) { context.report({ node, message: 'dynamic imports require a leading comment with the webpack chunkname', @@ -94,7 +97,7 @@ module.exports = { } } - if (!isChunknamePresent) { + if (!isChunknamePresent && !allowEmpty) { context.report({ node, message: diff --git a/tests/src/rules/dynamic-import-chunkname.js b/tests/src/rules/dynamic-import-chunkname.js index 73617a6f3..c710507b2 100644 --- a/tests/src/rules/dynamic-import-chunkname.js +++ b/tests/src/rules/dynamic-import-chunkname.js @@ -12,6 +12,10 @@ const pickyCommentOptions = [{ importFunctions: ['dynamicImport'], webpackChunknameFormat: pickyCommentFormat, }]; +const allowEmptyOptions = [{ + importFunctions: ['dynamicImport'], + allowEmpty: true, +}]; const multipleImportFunctionOptions = [{ importFunctions: ['dynamicImport', 'definitelyNotStaticImport'], }]; @@ -83,6 +87,19 @@ ruleTester.run('dynamic-import-chunkname', rule, { )`, options, }, + { + code: `import('test')`, + options: allowEmptyOptions, + parser, + }, + { + code: `import( + /* webpackMode: "lazy" */ + 'test' + )`, + options: allowEmptyOptions, + parser, + }, { code: `import( /* webpackChunkName: "someModule" */ @@ -975,6 +992,19 @@ context('TypeScript', () => { ruleTester.run('dynamic-import-chunkname', rule, { valid: [ + { + code: `import('test')`, + options: allowEmptyOptions, + parser: typescriptParser, + }, + { + code: `import( + /* webpackMode: "lazy" */ + 'test' + )`, + options: allowEmptyOptions, + parser: typescriptParser, + }, { code: `import( /* webpackChunkName: "someModule" */