Skip to content

Commit 6561f9c

Browse files
committed
feat: update to webpack4+
1 parent 60603e6 commit 6561f9c

File tree

6 files changed

+4598
-2234
lines changed

6 files changed

+4598
-2234
lines changed

.travis.yml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ language: node_js
88
node_js:
99
- 8
1010
- 6
11-
- 4
1211

1312
notifications:
1413
email: false

appveyor.yml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ environment:
88
# node.js
99
- nodejs_version: "8"
1010
- nodejs_version: "6"
11-
- nodejs_version: "4"
1211

1312
platform:
1413
- x86

package.json

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,40 +29,42 @@
2929
"license": "MIT",
3030
"devDependencies": {
3131
"babel-cli": "^6.24.0",
32-
"babel-core": "^6.24.0",
33-
"babel-eslint": "^7.2.3",
34-
"babel-jest": "^19.0.0",
35-
"babel-loader": "^7.1.1",
36-
"babel-plugin-add-module-exports": "^0.2.1",
32+
"babel-core": "^6.26.3",
33+
"babel-eslint": "^10.0.1",
34+
"babel-jest": "^23.6.0",
35+
"babel-loader": "^7.0.0",
36+
"babel-plugin-add-module-exports": "^1.0.0",
3737
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
38-
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
38+
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
3939
"babel-plugin-transform-es2015-parameters": "^6.24.1",
4040
"babel-plugin-transform-es2015-spread": "^6.22.0",
4141
"babel-preset-es2015": "^6.24.0",
4242
"babel-preset-stage-0": "^6.22.0",
43-
"eslint": "^4.2.0",
44-
"eslint-config-standard": "^10.2.1",
45-
"eslint-loader": "^1.9.0",
46-
"eslint-plugin-babel": "3.2",
43+
"eslint": "^5.9.0",
44+
"eslint-config-standard": "^12.0.0",
45+
"eslint-loader": "^2.1.1",
46+
"eslint-plugin-babel": "^5.3.0",
4747
"eslint-plugin-import": "^2.7.0",
48-
"eslint-plugin-jest": "^19.0.1",
49-
"eslint-plugin-node": "^5.1.0",
50-
"eslint-plugin-promise": "^3.5.0",
51-
"eslint-plugin-standard": "^3.0.1",
52-
"file-loader": "^0.11.1",
53-
"jest": "^19.0.2",
48+
"eslint-plugin-jest": "^22.1.0",
49+
"eslint-plugin-node": "^8.0.0",
50+
"eslint-plugin-promise": "^4.0.1",
51+
"eslint-plugin-standard": "^4.0.0",
52+
"file-loader": "^2.0.0",
53+
"jest": "^23.6.0",
5454
"mkdirp": "^0.5.1",
55-
"rimraf": "^2.6.1",
56-
"webpack": "^3.0.0"
55+
"rimraf": "^2.6.2",
56+
"webpack": "^4.27.0",
57+
"webpack-cli": "^3.1.2"
5758
},
5859
"dependencies": {
59-
"fs-extra": "^3.0.1",
60-
"globby": "^6.1.0",
61-
"lodash": "^4.17.4",
62-
"webpack-sources": "^0.2.3"
60+
"fs-extra": "^7.0.1",
61+
"globby": "^8.0.1",
62+
"jest-cli": "^23.6.0",
63+
"lodash": "^4.17.11",
64+
"webpack-sources": "^1.3.0"
6365
},
6466
"peerDependencies": {
65-
"webpack": "^2.2.0-rc || ^3"
67+
"webpack": "^4"
6668
},
6769
"jest": {
6870
"modulePathIgnorePatterns": [

src/index.js

Lines changed: 152 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { remove, readJson, existsSync, stat, readFile } from 'fs-extra';
22
import { resolve, dirname, relative, join, parse } from 'path';
3-
import { optimize, LoaderTargetPlugin, JsonpTemplatePlugin } from 'webpack';
3+
import { optimize, LoaderTargetPlugin } from 'webpack';
4+
import JsonpTemplatePlugin from 'webpack/lib/web/JsonpTemplatePlugin'
45
import { ConcatSource } from 'webpack-sources';
56
import globby from 'globby';
67
import { defaults, values, uniq } from 'lodash';
@@ -9,7 +10,9 @@ import SingleEntryPlugin from 'webpack/lib/SingleEntryPlugin';
910
import FunctionModulePlugin from 'webpack/lib/FunctionModulePlugin';
1011
import NodeSourcePlugin from 'webpack/lib/node/NodeSourcePlugin';
1112

12-
const { CommonsChunkPlugin } = optimize;
13+
const pluginName = 'WXAppPlugin';
14+
15+
const { SplitChunksPlugin } = optimize;
1316

1417
const deprecated = function deprecated(obj, key, adapter, explain) {
1518
if (deprecated.warned.has(key)) {
@@ -93,38 +96,70 @@ export default class WXAppPlugin {
9396

9497
this.enforceTarget(compiler);
9598

96-
compiler.plugin(
97-
'run',
98-
this.try(async compiler => {
99-
await this.run(compiler);
100-
})
101-
);
99+
if (compiler.hooks) {
100+
compiler.hooks.run.tapAsync(pluginName,
101+
this.try(async compilation => {
102+
await this.run(compiler);
103+
})
104+
);
102105

103-
compiler.plugin(
104-
'watch-run',
105-
this.try(async compiler => {
106-
await this.run(compiler.compiler);
107-
})
108-
);
106+
compiler.hooks.watchRun.tapAsync(pluginName,
107+
this.try(async compiler => {
108+
await this.run(compiler);
109+
})
110+
);
109111

110-
compiler.plugin(
111-
'emit',
112-
this.try(async compilation => {
113-
if (clear && isFirst) {
114-
isFirst = false;
115-
await this.clear(compilation);
116-
}
112+
compiler.hooks.emit.tapAsync(pluginName,
113+
this.try(async compilation => {
114+
if (clear && isFirst) {
115+
isFirst = false;
116+
await this.clear(compilation);
117+
}
117118

118-
await this.toEmitTabBarIcons(compilation);
119-
})
120-
);
119+
await this.toEmitTabBarIcons(compilation);
120+
})
121+
);
121122

122-
compiler.plugin(
123-
'after-emit',
124-
this.try(async compilation => {
125-
await this.toAddTabBarIconsDependencies(compilation);
126-
})
127-
);
123+
compiler.hooks.afterEmit.tapAsync(pluginName,
124+
this.try(async compilation => {
125+
await this.toAddTabBarIconsDependencies(compilation);
126+
})
127+
);
128+
}
129+
else {
130+
compiler.plugin(
131+
'run',
132+
this.try(async compiler => {
133+
await this.run(compiler);
134+
})
135+
);
136+
137+
compiler.plugin(
138+
'watch-run',
139+
this.try(async compiler => {
140+
await this.run(compiler.compiler);
141+
})
142+
);
143+
144+
compiler.plugin(
145+
'emit',
146+
this.try(async compilation => {
147+
if (clear && isFirst) {
148+
isFirst = false;
149+
await this.clear(compilation);
150+
}
151+
152+
await this.toEmitTabBarIcons(compilation);
153+
})
154+
);
155+
156+
compiler.plugin(
157+
'after-emit',
158+
this.try(async compilation => {
159+
await this.toAddTabBarIconsDependencies(compilation);
160+
})
161+
);
162+
}
128163
}
129164

130165
try = handler => async (arg, callback) => {
@@ -238,7 +273,7 @@ export default class WXAppPlugin {
238273
toAddTabBarIconsDependencies(compilation) {
239274
const { fileDependencies } = compilation;
240275
this.tabBarIcons.forEach(iconPath => {
241-
if (!~fileDependencies.indexOf(iconPath)) {
276+
if (!~fileDependencies.has(iconPath)) {
242277
fileDependencies.push(iconPath);
243278
}
244279
});
@@ -319,16 +354,25 @@ export default class WXAppPlugin {
319354
entryResources
320355
} = this;
321356

322-
compiler.plugin('compilation', compilation => {
323-
compilation.plugin('before-chunk-assets', () => {
324-
const assetsChunkIndex = compilation.chunks.findIndex(
325-
({ name }) => name === assetsChunkName
326-
);
327-
if (assetsChunkIndex > -1) {
328-
compilation.chunks.splice(assetsChunkIndex, 1);
329-
}
357+
const beforeChunkAssetsHandler = compilation => () => {
358+
const assetsChunkIndex = compilation.chunks.findIndex(
359+
({ name }) => name === assetsChunkName
360+
);
361+
if (assetsChunkIndex > -1) {
362+
compilation.chunks.splice(assetsChunkIndex, 1)
363+
}
364+
};
365+
366+
if (compiler.hooks) {
367+
compiler.hooks.compilation.tap(pluginName, compilation => {
368+
compilation.hooks.beforeChunkAssets.tap(pluginName, beforeChunkAssetsHandler(compilation));
330369
});
331-
});
370+
}
371+
else {
372+
compiler.plugin('compilation', compilation => {
373+
compilation.plugin('before-chunk-assets', beforeChunkAssetsHandler(compilation));
374+
});
375+
}
332376

333377
const patterns = entryResources
334378
.map(resource => `${resource}.*`)
@@ -368,25 +412,33 @@ export default class WXAppPlugin {
368412

369413
const scripts = entryResources.map(::this.getFullScriptPath);
370414

371-
compiler.apply(
372-
new CommonsChunkPlugin({
373-
name: stripExt(commonModuleName),
374-
minChunks: ({ resource }) => {
375-
if (resource) {
376-
const regExp = this.getChunkResourceRegExp();
377-
return regExp.test(resource) && scripts.indexOf(resource) < 0;
378-
}
379-
return false;
415+
const applyOpt = {
416+
name: stripExt(commonModuleName),
417+
minChunks: ({ resource }) => {
418+
if (resource) {
419+
const regExp = this.getChunkResourceRegExp();
420+
return regExp.test(resource) && scripts.indexOf(resource) < 0;
380421
}
381-
})
422+
return false;
423+
}
424+
};
425+
426+
compiler.apply(
427+
new SplitChunksPlugin(applyOpt)
382428
);
383429
}
384430

385431
addScriptEntry(compiler, entry, name) {
386-
compiler.plugin('make', (compilation, callback) => {
387-
const dep = SingleEntryPlugin.createDependency(entry, name);
388-
compilation.addEntry(this.base, dep, name, callback);
389-
});
432+
const makeHandler = (compilation, callback) => {
433+
const dep = SingleEntryPlugin.createDependency(entry, name)
434+
compilation.addEntry(this.base, dep, name, callback)
435+
};
436+
if (compiler.hooks) {
437+
compiler.hooks.make.tapAsync(pluginName, makeHandler);
438+
}
439+
else {
440+
compiler.plugin('make', makeHandler);
441+
}
390442
}
391443

392444
compileScripts(compiler) {
@@ -405,45 +457,68 @@ export default class WXAppPlugin {
405457
const commonChunkName = stripExt(commonModuleName);
406458
const globalVar = target.name === 'Alipay' ? 'my' : 'wx';
407459

408-
// inject chunk entries
409-
compilation.chunkTemplate.plugin('render', (core, { name }) => {
460+
const renderHandler = (core, { name }) => {
410461
if (this.entryResources.indexOf(name) >= 0) {
411-
const relativePath = relative(dirname(name), `./${commonModuleName}`);
412-
const posixPath = relativePath.replace(/\\/g, '/');
413-
const source = core.source();
462+
const relativePath = relative(dirname(name), `./${commonModuleName}`)
463+
const posixPath = relativePath.replace(/\\/g, '/')
464+
const source = core.source()
414465

415466
// eslint-disable-next-line max-len
416-
const injectContent = `; function webpackJsonp() { require("./${posixPath}"); ${globalVar}.webpackJsonp.apply(null, arguments); }`;
467+
const injectContent = `; function webpackJsonp() { require("./${posixPath}"); ${globalVar}.webpackJsonp.apply(null, arguments); }`
417468

418469
if (source.indexOf(injectContent) < 0) {
419-
const concatSource = new ConcatSource(core);
420-
concatSource.add(injectContent);
421-
return concatSource;
470+
const concatSource = new ConcatSource(core)
471+
concatSource.add(injectContent)
472+
return concatSource
422473
}
423474
}
424-
return core;
425-
});
475+
return core
476+
};
426477

427-
// replace `window` to `global` in common chunk
428-
compilation.mainTemplate.plugin('bootstrap', (source, chunk) => {
429-
const windowRegExp = new RegExp('window', 'g');
478+
const bootstrapHandler = (source, chunk) => {
479+
const windowRegExp = new RegExp('window', 'g')
430480
if (chunk.name === commonChunkName) {
431-
return source.replace(windowRegExp, globalVar);
481+
return source.replace(windowRegExp, globalVar)
432482
}
433-
return source;
434-
});
483+
return source
484+
};
435485

436-
// override `require.ensure()`
437-
compilation.mainTemplate.plugin(
438-
'require-ensure',
439-
() => 'throw new Error("Not chunk loading available");'
440-
);
486+
// inject chunk entries
487+
if (compilation.chunkTemplate.hooks) {
488+
// inject chunk entries
489+
compilation.chunkTemplate.hooks.render.tap(pluginName, renderHandler);
490+
491+
// replace `window` to `global` in common chunk
492+
compilation.mainTemplate.hooks.bootstrap.tap(pluginName, bootstrapHandler);
493+
494+
// override `require.ensure()`
495+
compilation.mainTemplate.hooks.requireEnsure.tap(pluginName,
496+
() => 'throw new Error("Not chunk loading available");'
497+
);
498+
}
499+
else {
500+
compilation.chunkTemplate.plugin('render', renderHandler);
501+
502+
// replace `window` to `global` in common chunk
503+
compilation.mainTemplate.plugin('bootstrap', bootstrapHandler);
504+
505+
// override `require.ensure()`
506+
compilation.mainTemplate.plugin(
507+
'require-ensure',
508+
() => 'throw new Error("Not chunk loading available");'
509+
);
510+
}
441511
}
442512

443513
async run(compiler) {
444514
this.base = this.getBase(compiler);
445515
this.entryResources = await this.getEntryResource();
446-
compiler.plugin('compilation', ::this.toModifyTemplate);
516+
if (compiler.hooks) {
517+
compiler.hooks.compilation.tap(pluginName, ::this.toModifyTemplate);
518+
}
519+
else {
520+
compiler.plugin('compilation', ::this.toModifyTemplate);
521+
}
447522
this.compileScripts(compiler);
448523
await this.compileAssets(compiler);
449524
}

test/webpack.config.babel.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default {
2828
},
2929
{
3030
test: /\.(wxss|wxml|json|png)$/,
31+
type: 'javascript/auto',
3132
include,
3233
loader: 'file-loader',
3334
options: {

0 commit comments

Comments
 (0)