Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: multi-page chunks support RegExp and Function #1320

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -153,9 +153,9 @@ Allowed values are as follows
|**`hash`**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting|
|**`cache`**|`{Boolean}`|`true`|Emit the file only if it was changed|
|**`showErrors`**|`{Boolean}`|`true`|Errors details will be written into the HTML page|
|**`chunks`**|`{?}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)|
|**`chunks`**|`{Array.<string>\|RegExp\|Function\|'all'}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)|
|**[`chunksSortMode`](#plugins)**|`{String\|Function}`|`auto`|Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `'none' \| 'auto' \| 'dependency' \| 'manual' \| {Function}`|
|**`excludeChunks`**|`{Array.<string>}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
|**`excludeChunks`**|`{Array.<string>\|RegExp\|Function}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
|**`xhtml`**|`{Boolean}`|`false`|If `true` render the `link` tags as self-closing (XHTML compliant)|

Here's an example webpack config illustrating how to use these options
Expand Down
23 changes: 19 additions & 4 deletions index.js
Expand Up @@ -499,19 +499,34 @@ class HtmlWebpackPlugin {
/**
* Return all chunks from the compilation result which match the exclude and include filters
* @param {any} chunks
* @param {string[]|'all'} includedChunks
* @param {string[]} excludedChunks
* @param {string[]|{test(chunkName: string): boolean}|((chunkName: string) => boolean)|'all'} includedChunks
* @param {string[]|{test(chunkName: string): boolean}|((chunkName: string) => boolean)} excludedChunks
*/
filterChunks (chunks, includedChunks, excludedChunks) {
return chunks.filter(chunkName => {
// Skip if the chunks should be filtered and the given chunk was not added explicity
if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) { // chunks: Array
return false;
} else if (includedChunks instanceof RegExp) { // chunks: RegExp
return includedChunks.test(chunkName);
} else if (typeof includedChunks === 'function') { // chunks: Function
return includedChunks(chunkName);
}
// if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
// return false;
// }

// Skip if the chunks should be filtered and the given chunk was excluded explicity
if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) { // chunks: Array
return false;
} else if (excludedChunks instanceof RegExp) { // chunks: RegExp
return !excludedChunks.test(chunkName);
} else if (typeof excludedChunks === 'function') { // chunks: Function
return excludedChunks(chunkName);
}
// if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
// return false;
// }
// Add otherwise
return true;
});
Expand Down
80 changes: 80 additions & 0 deletions spec/basic.spec.js
Expand Up @@ -315,6 +315,46 @@ describe('HtmlWebpackPlugin', () => {
}, ['<script src="app_bundle.js"'], null, done);
});

it('allows you to inject a specified asset into a given html file', done => {
testHtmlPlugin({
mode: 'production',
entry: {
util: path.join(__dirname, 'fixtures/util.js'),
app: path.join(__dirname, 'fixtures/index.js')
},
output: {
path: OUTPUT_DIR,
filename: '[name]_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
inject: true,
chunks: /^app/,
template: path.join(__dirname, 'fixtures/plain.html')
})]
}, ['<script src="app_bundle.js"'], null, done);
});

it('allows you to inject a specified asset into a given html file', done => {
testHtmlPlugin({
mode: 'production',
entry: {
util: path.join(__dirname, 'fixtures/util.js'),
app: path.join(__dirname, 'fixtures/index.js')
},
output: {
path: OUTPUT_DIR,
filename: '[name]_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
inject: true,
chunks: function (chunkName) {
return /^app/.test(chunkName);
},
template: path.join(__dirname, 'fixtures/plain.html')
})]
}, ['<script src="app_bundle.js"'], null, done);
});

it('allows you to inject a specified asset into a given html file', done => {
testHtmlPlugin({
mode: 'production',
Expand All @@ -334,6 +374,46 @@ describe('HtmlWebpackPlugin', () => {
}, ['<script src="app_bundle.js"'], null, done);
});

it('allows you to inject a specified asset into a given html file', done => {
testHtmlPlugin({
mode: 'production',
entry: {
util: path.join(__dirname, 'fixtures/util.js'),
app: path.join(__dirname, 'fixtures/index.js')
},
output: {
path: OUTPUT_DIR,
filename: '[name]_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
inject: true,
excludeChunks: /^util/,
template: path.join(__dirname, 'fixtures/plain.html')
})]
}, ['<script src="app_bundle.js"'], null, done);
});

it('allows you to inject a specified asset into a given html file', done => {
testHtmlPlugin({
mode: 'production',
entry: {
util: path.join(__dirname, 'fixtures/util.js'),
app: path.join(__dirname, 'fixtures/index.js')
},
output: {
path: OUTPUT_DIR,
filename: '[name]_bundle.js'
},
plugins: [new HtmlWebpackPlugin({
inject: true,
excludeChunks: function (chunkName) {
return !/^util/.test(chunkName);
},
template: path.join(__dirname, 'fixtures/plain.html')
})]
}, ['<script src="app_bundle.js"'], null, done);
});

it('allows you to use chunkhash with asset into a given html file', done => {
testHtmlPlugin({
mode: 'production',
Expand Down
4 changes: 2 additions & 2 deletions typings.d.ts
Expand Up @@ -27,7 +27,7 @@ declare namespace HtmlWebpackPlugin {
/**
* List all entries which should be injected
*/
chunks: "all" | string[];
chunks: "all" | string[] | RegExp | (((chunkName: string) => boolean));
/**
* Allows to control how chunks should be sorted before they are included to the html.
* Default: `'auto'`.
Expand All @@ -39,7 +39,7 @@ declare namespace HtmlWebpackPlugin {
/**
* List all entries which should not be injeccted
*/
excludeChunks: string[];
excludeChunks: string[] | RegExp | (((chunkName: string) => boolean));
/**
* Path to the favicon icon
*/
Expand Down