Fix issue [#39](#39) (#40)

Fixed `chunkGroup.options.name` not available on Webpack v4.0.0 (#39)
yoriiis · Jan 28, 2020 · ef5c2e8 · ef5c2e8
1 parent fd8db9e
commit ef5c2e8
Show file tree

Hide file tree

Showing 15 changed files with 226 additions and 110 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,18 +1,23 @@
 {
     "[javascript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     },
-    "editor.autoIndent": false,
+    "[postcss]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+    "editor.autoIndent": "none",
     "editor.formatOnSave": false,
     "editor.tabSize": 4,
-    "eslint.autoFixOnSave": false,
     "files.trimTrailingWhitespace": true,
     "javascript.format.enable": false,
     "javascript.validate.enable": false,
     "search.exclude": {
         "**/node_modules": true
     },
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": false
-    }
-}
+        "source.fixAll.eslint": true
+    },
+	"editor.rulers": [100]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 3.4.6
+
+### Fixes
+
+* Fix comptibility support with Webpack `v4.0.0` [#39](https://github.com/yoriiis/chunks-webpack-plugin/issues/39)
+
 ## 3.4.5
 
 ### New features

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ChunksWebpackPlugin
 
-![Chunks Webpack Plugin](https://img.shields.io/badge/chunks--webpack--plugin-v3.4.5-546e7a.svg?style=for-the-badge) [![TravisCI](https://img.shields.io/travis/com/yoriiis/chunks-webpack-plugin/master?style=for-the-badge)](https://travis-ci.com/yoriiis/chunks-webpack-plugin) [![Coverage Status](https://img.shields.io/coveralls/github/yoriiis/chunks-webpack-plugin?style=for-the-badge)](https://coveralls.io/github/yoriiis/chunks-webpack-plugin?branch=master) ![Node.js](https://img.shields.io/node/v/chunks-webpack-plugin?style=for-the-badge) [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/chunks-webpack-plugin?style=for-the-badge)](https://bundlephobia.com/result?p=fela@latest) [![Npm downloads](https://img.shields.io/npm/dm/chunks-webpack-plugin?color=fb3e44&label=npm%20downloads&style=for-the-badge)](https://npmjs.com/package/chunks-webpack-plugin) [![Chat on Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg?style=for-the-badge)](https://discordapp.com/invite/uC8FkDn)
+![Chunks Webpack Plugin](https://img.shields.io/badge/chunks--webpack--plugin-v3.4.6-546e7a.svg?style=for-the-badge) [![TravisCI](https://img.shields.io/travis/com/yoriiis/chunks-webpack-plugin/master?style=for-the-badge)](https://travis-ci.com/yoriiis/chunks-webpack-plugin) [![Coverage Status](https://img.shields.io/coveralls/github/yoriiis/chunks-webpack-plugin?style=for-the-badge)](https://coveralls.io/github/yoriiis/chunks-webpack-plugin?branch=master) ![Node.js](https://img.shields.io/node/v/chunks-webpack-plugin?style=for-the-badge) [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/chunks-webpack-plugin?style=for-the-badge)](https://bundlephobia.com/result?p=fela@latest) [![Npm downloads](https://img.shields.io/npm/dm/chunks-webpack-plugin?color=fb3e44&label=npm%20downloads&style=for-the-badge)](https://npmjs.com/package/chunks-webpack-plugin) [![Chat on Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg?style=for-the-badge)](https://discordapp.com/invite/uC8FkDn)
 
 The `ChunksWebpackPlugin` create HTML files to serve your webpack bundles. It is very convenient with multiple entry points and it works without configuration.
 

diff --git a/dist/index.js b/dist/index.js
@@ -3,7 +3,7 @@
 /**
  * @license MIT
  * @name ChunksWebpackPlugin
- * @version 3.4.5
+ * @version 3.4.6
  * @author: Yoriiis aka Joris DANIEL <joris.daniel@gmail.com>
  * @description: Easily create HTML files with all chunks by entrypoint (based on Webpack chunkGroups)
  * {@link https://github.com/yoriiis/chunks-webpack-plugins}
@@ -53,7 +53,7 @@ module.exports = class ChunksWebpackPlugin {
     compilation.chunkGroups.forEach(chunkGroup => {
       // Check if chunkGroup contains chunks
       if (chunkGroup.chunks.length) {
-        const entryName = chunkGroup.options.name; // ignore dynamic import chunk
+        const entryName = this.getEntryName(chunkGroup); // Ignore dynamic import chunk
 
         if (entryName === null || typeof entryName === 'undefined') {
           return;
@@ -103,6 +103,28 @@ module.exports = class ChunksWebpackPlugin {
       });
     }
   }
+  /**
+   * Get entry point name from chunk group
+   *
+   * @param {Object} chunkGroup Group of chunks from Webpack compilation
+   *
+   * @return {(String|null)} Entry point name
+   */
+
+
+  getEntryName(chunkGroup) {
+    let entryName;
+
+    try {
+      entryName = chunkGroup.options.name;
+    } catch (error) {
+      // Compatibility support with Webpack v4.4.0
+      // https://github.com/webpack/webpack/commit/9cb1a663173f5fcbda83b2916e0f1679c1dc642e#diff-d833826ec29decf85ce1163ac4e7972eL31
+      entryName = chunkGroup.name || null;
+    }
+
+    return entryName;
+  }
   /**
    * Update the class property manifest
    * which contains all chunks informations by entrypoint

diff --git a/example/src/css/app-a.css b/example/src/css/app-a.css
@@ -1,7 +1,7 @@
 .button {
-    display: block;
-    width: auto;
-    height: auto;
-    background: none;
-    color: #000;
+	display: block;
+	width: auto;
+	height: auto;
+	background: none;
+	color: #000;
 }
diff --git a/example/src/css/app-b.css b/example/src/css/app-b.css
@@ -1,7 +1,7 @@
 .button-large {
-    display: block;
-    width: 100%;
-    height: auto;
-    background: none;
-    color: #000;
+	display: block;
+	width: 100%;
+	height: auto;
+	background: none;
+	color: #000;
 }
diff --git a/example/src/css/app-c.css b/example/src/css/app-c.css
@@ -1,7 +1,7 @@
 .button-small {
-    display: block;
-    width: 100%;
-    height: auto;
-    background: none;
-    color: #000;
+	display: block;
+	width: 100%;
+	height: auto;
+	background: none;
+	color: #000;
 }
diff --git a/example/src/js/app-c.js b/example/src/js/app-c.js
@@ -1,7 +1,6 @@
 import 'vlitejs'
 import 'sanitize.css'
 import '../css/app-c.css'
-
-(async () => {
-	await import(/* webpackChunkName: "lib-dynamic" */'../lib/dynamic')
+;(async () => {
+	await import(/* webpackChunkName: "lib-dynamic" */ '../lib/dynamic')
 })()
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -25,19 +25,25 @@ module.exports = (env, argv) => {
 			filename: 'js/[name].js'
 		},
 		module: {
-			rules: [{
-				test: /\.js$/,
-				use: [{
-					loader: 'babel-loader'
-				}]
-			}, {
-				test: /\.css$/,
-				use: [
-					MiniCssExtractPlugin.loader, {
-						loader: 'css-loader'
-					}
-				]
-			}]
+			rules: [
+				{
+					test: /\.js$/,
+					use: [
+						{
+							loader: 'babel-loader'
+						}
+					]
+				},
+				{
+					test: /\.css$/,
+					use: [
+						MiniCssExtractPlugin.loader,
+						{
+							loader: 'css-loader'
+						}
+					]
+				}
+			]
 		},
 		plugins: [
 			new MiniCssExtractPlugin({
@@ -51,14 +57,20 @@ module.exports = (env, argv) => {
 				generateChunksFiles: true,
 				customFormatTags: (chunksSorted, chunkGroup) => {
 					// Generate all HTML style tags with CDN prefix
-					const styles = chunksSorted.styles.map(chunkCss =>
-						`<link rel="stylesheet" href="https://cdn.domain.com${chunkCss}" />`
-					).join('')
+					const styles = chunksSorted.styles
+						.map(
+							chunkCss =>
+								`<link rel="stylesheet" href="https://cdn.domain.com${chunkCss}" />`
+						)
+						.join('')
 
 					// Generate all HTML style tags with CDN prefix and defer attribute
-					const scripts = chunksSorted.scripts.map(chunkJs =>
-						`<script defer src="https://cdn.domain.com${chunkJs}"></script>`
-					).join('')
+					const scripts = chunksSorted.scripts
+						.map(
+							chunkJs =>
+								`<script defer src="https://cdn.domain.com${chunkJs}"></script>`
+						)
+						.join('')
 
 					return { styles, scripts }
 				}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "chunks-webpack-plugin",
-	"version": "3.4.5",
+	"version": "3.4.6",
 	"description": "Easily create HTML files with all chunks by entrypoint (based on Webpack chunkGroups)",
 	"keywords": [
 		"chunks",

diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+	printWidth: 100
+}
diff --git a/src/__tests__/index.test.js b/src/__tests__/index.test.js
@@ -15,14 +15,14 @@ const options = {
 	generateChunksFiles: true,
 	customFormatTags: (chunksSorted, chunkGroup) => {
 		// Generate all HTML style tags with CDN prefix
-		const styles = chunksSorted.styles.map(chunkCss =>
-			`<link rel="stylesheet" href="https://cdn.domain.com${chunkCss}" />`
-		).join('')
+		const styles = chunksSorted.styles
+			.map(chunkCss => `<link rel="stylesheet" href="https://cdn.domain.com${chunkCss}" />`)
+			.join('')
 
 		// Generate all HTML style tags with CDN prefix and defer attribute
-		const scripts = chunksSorted.scripts.map(chunkJs =>
-			`<script defer src="https://cdn.domain.com${chunkJs}"></script>`
-		).join('')
+		const scripts = chunksSorted.scripts
+			.map(chunkJs => `<script defer src="https://cdn.domain.com${chunkJs}"></script>`)
+			.join('')
 
 		return { styles, scripts }
 	}
@@ -55,17 +55,18 @@ beforeEach(() => {
 
 	compilationWebpack = {
 		assets: {},
-		chunkGroups: [{
-			chunks: [{
-				files: [
-					'css/vendors~app-a~app-b.css',
-					'js/vendors~app-a~app-b.js'
-				]
-			}],
-			options: {
-				name: 'app-a'
+		chunkGroups: [
+			{
+				chunks: [
+					{
+						files: ['css/vendors~app-a~app-b.css', 'js/vendors~app-a~app-b.js']
+					}
+				],
+				options: {
+					name: 'app-a'
+				}
 			}
-		}],
+		],
 		options: {
 			output: {
 				path: '/dist/',
@@ -233,11 +234,11 @@ describe('ChunksWebpackPlugin', () => {
 
 	it('Initialize the sortsChunksByType function with scripts only', () => {
 		const chunksSorted = chunksWebpackPlugin.sortsChunksByType({
-			chunks: [{
-				files: [
-					'css/vendors~app-a~app-b.css'
-				]
-			}],
+			chunks: [
+				{
+					files: ['css/vendors~app-a~app-b.css']
+				}
+			],
 			publicPath: chunksWebpackPlugin.getPublicPath(compilationWebpack)
 		})
 
@@ -292,15 +293,24 @@ describe('ChunksWebpackPlugin', () => {
 		})
 
 		expect(Object.keys(compilationWebpack.assets)).toEqual(['chunks-manifest.json'])
-		expect(Object.keys(compilationWebpack.assets['chunks-manifest.json'])).toEqual(['source', 'size'])
+		expect(Object.keys(compilationWebpack.assets['chunks-manifest.json'])).toEqual([
+			'source',
+			'size'
+		])
 
 		const source = compilationWebpack.assets['chunks-manifest.json'].source()
-		expect(source).toEqual(JSON.stringify({
-			'app-a': {
-				styles: ['/dist/css/vendors~app-a~app-b.css'],
-				scripts: ['/dist/js/vendors~app-a~app-b.js']
-			}
-		}, null, 2))
+		expect(source).toEqual(
+			JSON.stringify(
+				{
+					'app-a': {
+						styles: ['/dist/css/vendors~app-a~app-b.css'],
+						scripts: ['/dist/js/vendors~app-a~app-b.js']
+					}
+				},
+				null,
+				2
+			)
+		)
 
 		const size = compilationWebpack.assets['chunks-manifest.json'].size()
 		expect(size).toEqual(148)
@@ -310,13 +320,15 @@ describe('ChunksWebpackPlugin', () => {
 		chunksWebpackPlugin.updateManifest = jest.fn()
 		chunksWebpackPlugin.createHtmlChunksFiles = jest.fn()
 		const chunksSorted = chunksWebpackPlugin.sortsChunksByType({
-			chunks: [{
-				files: [
-					'css/vendors~app-a~app-b.css',
-					'js/vendors~app-a~app-b.js',
-					'js/vendors~app-a~app-b.js.map'
-				]
-			}],
+			chunks: [
+				{
+					files: [
+						'css/vendors~app-a~app-b.css',
+						'js/vendors~app-a~app-b.js',
+						'js/vendors~app-a~app-b.js.map'
+					]
+				}
+			],
 			publicPath: chunksWebpackPlugin.getPublicPath(compilationWebpack)
 		})
 		expect(chunksSorted).toEqual({
@@ -330,9 +342,11 @@ describe('ChunksWebpackPlugin', () => {
 		chunksWebpackPlugin.options.customFormatTags = ''
 		chunksWebpackPlugin.options.outputPath = 'default'
 		compilationWebpack.chunkGroups.push({
-			chunks: [{
-				files: ['js/lib-dynamic.js', 'js/lib-dynamic.js.map']
-			}],
+			chunks: [
+				{
+					files: ['js/lib-dynamic.js', 'js/lib-dynamic.js.map']
+				}
+			],
 			options: { name: null }
 		})
 		chunksWebpackPlugin.hookEmit(compilationWebpack)
@@ -345,4 +359,27 @@ describe('ChunksWebpackPlugin', () => {
 			outputPath: '/dist/'
 		})
 	})
+
+	it('Initialize the hookEmit function ignore dynamic import chunk (webpack v4.0.0 notation)', () => {
+		chunksWebpackPlugin.createHtmlChunksFiles = jest.fn()
+		chunksWebpackPlugin.options.customFormatTags = ''
+		chunksWebpackPlugin.options.outputPath = 'default'
+		compilationWebpack.chunkGroups.push({
+			chunks: [
+				{
+					files: ['js/lib-dynamic.js', 'js/lib-dynamic.js.map']
+				}
+			],
+			name: null
+		})
+		chunksWebpackPlugin.hookEmit(compilationWebpack)
+		expect(chunksWebpackPlugin.createHtmlChunksFiles).not.toHaveBeenCalledWith({
+			entry: null,
+			tagsHTML: {
+				styles: '',
+				scripts: '<script src="/dist/js/4.js"></script>'
+			},
+			outputPath: '/dist/'
+		})
+	})
 })