feat: Add support for chunks (#16)

bebraw · sapegin · commit 3d36f33a0cf4 · 2019-12-08T18:41:11.000+01:00
This feature is similar to the one in html-webpack-plugin and it's required for multi-page setups.
diff --git a/README.md b/README.md
@@ -30,12 +30,42 @@ const config = {
         cssAttributes: { rel: 'preload' },
         // Optional
         jsAttributes: { defer: 'defer' }
-      }
+      },
+      // Optional, use this for choosing chunks to include to your page.
+      // See the expanded example below.
+      chunks: ['app']
     })
   ]
 };
 ```
 
+### Multiple pages
+
+It's possible to use `MiniHtmlWebpackPlugin` to develop sites with multiple pages. It can be combined with webpack's bundle splitting so you can share common code across different pages.
+
+To achieve this, you'll have to define `entry` against each the code for each page and define `MiniHtmlWebpackPlugin` to match them. In practice you might want to abstract this pairing but to give you the full idea, consider the example below.
+
+```javascript
+const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
+
+const config = {
+  entry: {
+    app: './app.js',
+    another: './another.js'
+  },
+  plugins: [
+    new MiniHtmlWebpackPlugin({
+      filename: 'index.html',
+      chunks: ['app'],
+    }),
+    new MiniHtmlWebpackPlugin({
+      filename: 'another.html',
+      chunks: ['another'],
+    },
+  ],
+};
+```
+
 ### HTML minification
 
 ```javascript
diff --git a/__snapshots__/test.js.snap b/__snapshots__/test.js.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`custom chunks 1`] = `
+"<!DOCTYPE html>
+  <html lang=\\"en\\">
+    <head>
+      <meta charset=\\"UTF-8\\">
+      <title></title>
+      
+    </head>
+    <body>
+      <script src=\\"runtime~index.js\\"></script><script src=\\"index.js\\"></script>
+    </body>
+  </html>"
+`;
+
+exports[`custom chunks 2`] = `
+"<!DOCTYPE html>
+  <html lang=\\"en\\">
+    <head>
+      <meta charset=\\"UTF-8\\">
+      <title></title>
+      
+    </head>
+    <body>
+      <script src=\\"runtime~another.js\\"></script><script src=\\"another.js\\"></script>
+    </body>
+  </html>"
+`;
+
 exports[`custom filename 1`] = `
 "<!DOCTYPE html>
   <html lang=\\"en\\">
diff --git a/index.js b/index.js
@@ -13,9 +13,13 @@ class MiniHtmlWebpackPlugin {
 			publicPath = '',
 			template,
 			context,
+			chunks,
 		} = this.options;
 
-		const files = getFiles(normalizeEntrypoints(compilation.entrypoints));
+		const files = getFiles(
+			normalizeEntrypoints(compilation.entrypoints),
+			chunks
+		);
 
 		const options = Object.assign({}, { publicPath }, context, files);
 
@@ -37,10 +41,14 @@ class MiniHtmlWebpackPlugin {
 	}
 }
 
-function getFiles(entrypoints) {
+function getFiles(entrypoints, chunks) {
 	const ret = {};
 
 	entrypoints.forEach(entry => {
+		if (chunks && !chunks.includes(entry.name)) {
+			return;
+		}
+
 		entry.getFiles().forEach(file => {
 			const extension = path.extname(file).replace(/\./, '');
 
diff --git a/test.js b/test.js
@@ -16,6 +16,36 @@ test('default options', () => {
 	});
 });
 
+test('custom chunks', () => {
+	return compiler(
+		{},
+		{
+			entry: {
+				index: './index.js',
+				another: './another.js',
+			},
+			plugins: [
+				new MiniHtmlWebpackPlugin({
+					filename: 'index.html',
+					chunks: ['index'],
+				}),
+				new MiniHtmlWebpackPlugin({
+					filename: 'another.html',
+					chunks: ['another'],
+				}),
+			],
+		}
+	).then(result => {
+		// This should contain only reference to the index chunk and the related
+		// runtime.
+		expect(result.compilation.assets['index.html']._value).toMatchSnapshot();
+
+		// This should contain only reference to the another chunk and the related
+		// runtime.
+		expect(result.compilation.assets['another.html']._value).toMatchSnapshot();
+	});
+});
+
 test('custom title', () => {
 	return compiler({}, getConfig({ context: { title: 'Pizza' } })).then(
 		result => {
diff --git a/test/fixtures/another.js b/test/fixtures/another.js
