feat: update to webpack4+

.travis.yml

@@ -8,7 +8,6 @@ language: node_js
 node_js:
   - 8
   - 6
-  - 4
 
 notifications:
   email: false

appveyor.yml

@@ -8,7 +8,6 @@ environment:
     # node.js
     - nodejs_version: "8"
     - nodejs_version: "6"
-    - nodejs_version: "4"
 
 platform:
   - x86

package.json

@@ -29,40 +29,42 @@
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.24.0",
-    "babel-core": "^6.24.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^19.0.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-es2015-parameters": "^6.24.1",
     "babel-plugin-transform-es2015-spread": "^6.22.0",
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-stage-0": "^6.22.0",
-    "eslint": "^4.2.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-babel": "3.2",
+    "eslint": "^5.9.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jest": "^19.0.1",
-    "eslint-plugin-node": "^5.1.0",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "file-loader": "^0.11.1",
-    "jest": "^19.0.2",
+    "eslint-plugin-jest": "^22.1.0",
+    "eslint-plugin-node": "^8.0.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "file-loader": "^2.0.0",
+    "jest": "^23.6.0",
     "mkdirp": "^0.5.1",
-    "rimraf": "^2.6.1",
-    "webpack": "^3.0.0"
+    "rimraf": "^2.6.2",
+    "webpack": "^4.27.0",
+    "webpack-cli": "^3.1.2"
   },
   "dependencies": {
-    "fs-extra": "^3.0.1",
-    "globby": "^6.1.0",
-    "lodash": "^4.17.4",
-    "webpack-sources": "^0.2.3"
+    "fs-extra": "^7.0.1",
+    "globby": "^8.0.1",
+    "jest-cli": "^23.6.0",
+    "lodash": "^4.17.11",
+    "webpack-sources": "^1.3.0"
   },
   "peerDependencies": {
-    "webpack": "^2.2.0-rc || ^3"
+    "webpack": "^4"
   },
   "jest": {
     "modulePathIgnorePatterns": [

src/index.js

@@ -1,6 +1,7 @@
 import { remove, readJson, existsSync, stat, readFile } from 'fs-extra';
 import { resolve, dirname, relative, join, parse } from 'path';
-import { optimize, LoaderTargetPlugin, JsonpTemplatePlugin } from 'webpack';
+import { optimize, LoaderTargetPlugin } from 'webpack';
+import JsonpTemplatePlugin from 'webpack/lib/web/JsonpTemplatePlugin'
 import { ConcatSource } from 'webpack-sources';
 import globby from 'globby';
 import { defaults, values, uniq } from 'lodash';
@@ -9,7 +10,9 @@ import SingleEntryPlugin from 'webpack/lib/SingleEntryPlugin';
 import FunctionModulePlugin from 'webpack/lib/FunctionModulePlugin';
 import NodeSourcePlugin from 'webpack/lib/node/NodeSourcePlugin';
 
-const { CommonsChunkPlugin } = optimize;
+const pluginName = 'WXAppPlugin';
+
+const { SplitChunksPlugin } = optimize;
 
 const deprecated = function deprecated(obj, key, adapter, explain) {
 	if (deprecated.warned.has(key)) {
@@ -93,38 +96,70 @@ export default class WXAppPlugin {
 
 		this.enforceTarget(compiler);
 
-		compiler.plugin(
-			'run',
-			this.try(async compiler => {
-				await this.run(compiler);
-			})
-		);
+		if (compiler.hooks) {
+			compiler.hooks.run.tapAsync(pluginName,
+				this.try(async compilation => {
+					await this.run(compiler);
+				})
+			);
 
-		compiler.plugin(
-			'watch-run',
-			this.try(async compiler => {
-				await this.run(compiler.compiler);
-			})
-		);
+			compiler.hooks.watchRun.tapAsync(pluginName,
+				this.try(async compiler => {
+					await this.run(compiler);
+				})
+			);
 
-		compiler.plugin(
-			'emit',
-			this.try(async compilation => {
-				if (clear && isFirst) {
-					isFirst = false;
-					await this.clear(compilation);
-				}
+			compiler.hooks.emit.tapAsync(pluginName,
+				this.try(async compilation => {
+					if (clear && isFirst) {
+						isFirst = false;
+						await this.clear(compilation);
+					}
 
-				await this.toEmitTabBarIcons(compilation);
-			})
-		);
+					await this.toEmitTabBarIcons(compilation);
+				})
+			);
 
-		compiler.plugin(
-			'after-emit',
-			this.try(async compilation => {
-				await this.toAddTabBarIconsDependencies(compilation);
-			})
-		);
+			compiler.hooks.afterEmit.tapAsync(pluginName,
+				this.try(async compilation => {
+					await this.toAddTabBarIconsDependencies(compilation);
+				})
+			);
+		}
+		else {
+			compiler.plugin(
+				'run',
+				this.try(async compiler => {
+					await this.run(compiler);
+				})
+			);
+
+			compiler.plugin(
+				'watch-run',
+				this.try(async compiler => {
+					await this.run(compiler.compiler);
+				})
+			);
+
+			compiler.plugin(
+				'emit',
+				this.try(async compilation => {
+					if (clear && isFirst) {
+						isFirst = false;
+						await this.clear(compilation);
+					}
+
+					await this.toEmitTabBarIcons(compilation);
+				})
+			);
+
+			compiler.plugin(
+				'after-emit',
+				this.try(async compilation => {
+					await this.toAddTabBarIconsDependencies(compilation);
+				})
+			);
+		}
 	}
 
 	try = handler => async (arg, callback) => {
@@ -238,7 +273,7 @@ export default class WXAppPlugin {
 	toAddTabBarIconsDependencies(compilation) {
 		const { fileDependencies } = compilation;
 		this.tabBarIcons.forEach(iconPath => {
-			if (!~fileDependencies.indexOf(iconPath)) {
+			if (!~fileDependencies.has(iconPath)) {
 				fileDependencies.push(iconPath);
 			}
 		});
@@ -319,16 +354,25 @@ export default class WXAppPlugin {
 			entryResources
 		} = this;
 
-		compiler.plugin('compilation', compilation => {
-			compilation.plugin('before-chunk-assets', () => {
-				const assetsChunkIndex = compilation.chunks.findIndex(
-					({ name }) => name === assetsChunkName
-				);
-				if (assetsChunkIndex > -1) {
-					compilation.chunks.splice(assetsChunkIndex, 1);
-				}
+		const beforeChunkAssetsHandler = compilation => () => {
+			const assetsChunkIndex = compilation.chunks.findIndex(
+				({ name }) => name === assetsChunkName
+			);
+			if (assetsChunkIndex > -1) {
+				compilation.chunks.splice(assetsChunkIndex, 1)
+			}
+		};
+
+		if (compiler.hooks) {
+			compiler.hooks.compilation.tap(pluginName, compilation => {
+				compilation.hooks.beforeChunkAssets.tap(pluginName, beforeChunkAssetsHandler(compilation));
 			});
-		});
+		}
+		else {
+			compiler.plugin('compilation', compilation => {
+				compilation.plugin('before-chunk-assets', beforeChunkAssetsHandler(compilation));
+			});
+		}
 
 		const patterns = entryResources
 			.map(resource => `${resource}.*`)
@@ -368,25 +412,33 @@ export default class WXAppPlugin {
 
 		const scripts = entryResources.map(::this.getFullScriptPath);
 
-		compiler.apply(
-			new CommonsChunkPlugin({
-				name: stripExt(commonModuleName),
-				minChunks: ({ resource }) => {
-					if (resource) {
-						const regExp = this.getChunkResourceRegExp();
-						return regExp.test(resource) && scripts.indexOf(resource) < 0;
-					}
-					return false;
+		const applyOpt = {
+			name: stripExt(commonModuleName),
+			minChunks: ({ resource }) => {
+				if (resource) {
+					const regExp = this.getChunkResourceRegExp();
+					return regExp.test(resource) && scripts.indexOf(resource) < 0;
 				}
-			})
+				return false;
+			}
+		};
+
+		compiler.apply(
+			new SplitChunksPlugin(applyOpt)
 		);
 	}
 
 	addScriptEntry(compiler, entry, name) {
-		compiler.plugin('make', (compilation, callback) => {
-			const dep = SingleEntryPlugin.createDependency(entry, name);
-			compilation.addEntry(this.base, dep, name, callback);
-		});
+		const makeHandler = (compilation, callback) => {
+			const dep = SingleEntryPlugin.createDependency(entry, name)
+			compilation.addEntry(this.base, dep, name, callback)
+		};
+		if (compiler.hooks) {
+			compiler.hooks.make.tapAsync(pluginName, makeHandler);
+		}
+		else {
+			compiler.plugin('make', makeHandler);
+		}
 	}
 
 	compileScripts(compiler) {
@@ -405,45 +457,68 @@ export default class WXAppPlugin {
 		const commonChunkName = stripExt(commonModuleName);
 		const globalVar = target.name === 'Alipay' ? 'my' : 'wx';
 
-		// inject chunk entries
-		compilation.chunkTemplate.plugin('render', (core, { name }) => {
+		const renderHandler = (core, { name }) => {
 			if (this.entryResources.indexOf(name) >= 0) {
-				const relativePath = relative(dirname(name), `./${commonModuleName}`);
-				const posixPath = relativePath.replace(/\\/g, '/');
-				const source = core.source();
+				const relativePath = relative(dirname(name), `./${commonModuleName}`)
+				const posixPath = relativePath.replace(/\\/g, '/')
+				const source = core.source()
 
 				// eslint-disable-next-line max-len
-				const injectContent = `; function webpackJsonp() { require("./${posixPath}"); ${globalVar}.webpackJsonp.apply(null, arguments); }`;
+				const injectContent = `; function webpackJsonp() { require("./${posixPath}"); ${globalVar}.webpackJsonp.apply(null, arguments); }`
 
 				if (source.indexOf(injectContent) < 0) {
-					const concatSource = new ConcatSource(core);
-					concatSource.add(injectContent);
-					return concatSource;
+					const concatSource = new ConcatSource(core)
+					concatSource.add(injectContent)
+					return concatSource
 				}
 			}
-			return core;
-		});
+			return core
+		};
 
-		// replace `window` to `global` in common chunk
-		compilation.mainTemplate.plugin('bootstrap', (source, chunk) => {
-			const windowRegExp = new RegExp('window', 'g');
+		const bootstrapHandler = (source, chunk) => {
+			const windowRegExp = new RegExp('window', 'g')
 			if (chunk.name === commonChunkName) {
-				return source.replace(windowRegExp, globalVar);
+				return source.replace(windowRegExp, globalVar)
 			}
-			return source;
-		});
+			return source
+		};
 
-		// override `require.ensure()`
-		compilation.mainTemplate.plugin(
-			'require-ensure',
-			() => 'throw new Error("Not chunk loading available");'
-		);
+		// inject chunk entries
+		if (compilation.chunkTemplate.hooks) {
+			// inject chunk entries
+			compilation.chunkTemplate.hooks.render.tap(pluginName, renderHandler);
+
+			// replace `window` to `global` in common chunk
+			compilation.mainTemplate.hooks.bootstrap.tap(pluginName, bootstrapHandler);
+
+			// override `require.ensure()`
+			compilation.mainTemplate.hooks.requireEnsure.tap(pluginName,
+				() => 'throw new Error("Not chunk loading available");'
+			);
+		}
+		else {
+			compilation.chunkTemplate.plugin('render', renderHandler);
+
+			// replace `window` to `global` in common chunk
+			compilation.mainTemplate.plugin('bootstrap', bootstrapHandler);
+
+			// override `require.ensure()`
+			compilation.mainTemplate.plugin(
+				'require-ensure',
+				() => 'throw new Error("Not chunk loading available");'
+			);
+		}
 	}
 
 	async run(compiler) {
 		this.base = this.getBase(compiler);
 		this.entryResources = await this.getEntryResource();
-		compiler.plugin('compilation', ::this.toModifyTemplate);
+		if (compiler.hooks) {
+			compiler.hooks.compilation.tap(pluginName, ::this.toModifyTemplate);
+		}
+		else {
+			compiler.plugin('compilation', ::this.toModifyTemplate);
+		}
 		this.compileScripts(compiler);
 		await this.compileAssets(compiler);
 	}

test/webpack.config.babel.js

@@ -28,6 +28,7 @@ export default {
 			},
 			{
 				test: /\.(wxss|wxml|json|png)$/,
+				type: 'javascript/auto',
 				include,
 				loader: 'file-loader',
 				options: {