feat: webpack 5 support (#3)

Author: dangreen

package.json

@@ -79,9 +79,9 @@
     "microbundle": "^0.12.4",
     "preact": "^10.5.7",
     "sucrase": "^3.16.0",
-    "terser-webpack-plugin": "^1.4.5",
-    "ts-loader": "^6.2.2",
-    "webpack": "^4.44.2"
+    "ts-loader": "^9.2.6",
+    "webpack": "^5.65.0",
+    "webpack-4": "./test/webpacks/4"
   },
   "dependencies": {
     "@babel/core": "^7.12.7",
@@ -94,8 +94,8 @@
     "magic-string": "^0.25.7",
     "regenerator-runtime": "^0.13.7",
     "rollup": "^1.32.1",
-    "terser": "^4.8.0",
-    "webpack-sources": "^1.4.3"
+    "terser": "^5.10.0",
+    "webpack-sources": "^3.2.2"
   },
   "peerDependencies": {
     "@babel/preset-env": ">= 7.10",

src/index.js

@@ -17,7 +17,7 @@
 import util from 'util';
 import { gzip } from 'zlib';
 import { promises as fs } from 'fs';
-import * as webpack from 'webpack';
+import * as defaultWebpack from 'webpack';
 import { SourceMapSource, RawSource } from 'webpack-sources';
 import { rollup } from 'rollup';
 import commonjsPlugin from '@rollup/plugin-commonjs';
@@ -75,7 +75,8 @@ export default class OptimizePlugin {
   /**
    * @param {Partial<DEFAULT_OPTIONS>?} [options]
    */
-  constructor (options) {
+  constructor (options, webpack = defaultWebpack) {
+    this.webpack = webpack;
     this.options = Object.assign({}, options || {});
     for (const i in DEFAULT_OPTIONS) {
       if (this.options[i] == null) this.options[i] = DEFAULT_OPTIONS[i];
@@ -104,14 +105,18 @@ export default class OptimizePlugin {
   }
 
   isWebpack4 () {
-    return webpack.version[0] === '4';
+    return this.webpack.version[0] === '4';
+  }
+
+  isWebpack5 () {
+    return this.webpack.version[0] === '5';
   }
 
   serializeOptions () {
     return this._serialized || (this._serialized = JSON.stringify(this.options));
   }
 
-  async optimize (compiler, compilation, chunks) {
+  async optimize (compiler, compilation, chunkFiles) {
     const cwd = compiler.context;
     const { timings, start, end } = createPerformanceTimings();
 
@@ -124,10 +129,6 @@ export default class OptimizePlugin {
     };
 
     const processing = new WeakMap();
-    const chunkFiles = Array.from(chunks).reduce(
-      (acc, chunk) => acc.concat(Array.from(chunk.files || [])),
-      []
-    );
     const chunkAssets = Array.from(compilation.additionalChunkAssets || []);
     const files = [...chunkFiles, ...chunkAssets];
 
@@ -150,7 +151,7 @@ export default class OptimizePlugin {
         const original = { file, source, map, options };
         // @ts-ignore-next
         const result = this.workerPool.enqueue(original);
-        pending = result.then(this.buildResultSources.bind(this, original));
+        pending = result.then(this.buildResultSources.bind(this, original)).catch(console.error);
         processing.set(asset, pending);
 
         const t = ` └ ${file}`;
@@ -449,14 +450,33 @@ export default class OptimizePlugin {
       compilation.chunkTemplate.hooks.hashForChunk.tap(NAME, updateWithHash.bind(null, null));
     } else {
       // @ts-ignore
-      webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).chunkHash.tap(NAME, updateWithHash);
+      this.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).chunkHash.tap(NAME, updateWithHash);
     }
   }
 
   apply (compiler) {
     compiler.hooks.compilation.tap(NAME, compilation => {
       this.updateChunkHash(compilation);
-      compilation.hooks.optimizeChunkAssets.tapPromise(NAME, this.optimize.bind(this, compiler, compilation));
+
+      if (this.isWebpack5()) {
+        compilation.hooks.processAssets.tapPromise({
+          name: NAME,
+          stage: this.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE
+        }, (assets) => {
+          const chunkFiles = Object.keys(assets);
+
+          return this.optimize(compiler, compilation, chunkFiles);
+        });
+      } else {
+        compilation.hooks.optimizeChunkAssets.tapPromise(NAME, (chunks) => {
+          const chunkFiles = Array.from(chunks).reduce(
+            (acc, chunk) => acc.concat(Array.from(chunk.files || [])),
+            []
+          );
+
+          return this.optimize(compiler, compilation, chunkFiles);
+        });
+      }
     });
   }
 }

src/lib/rollup-plugin-terser-simple.js

@@ -20,8 +20,8 @@ import { toBabelMap } from './util';
 export default function rollupPluginTerserSimple () {
   return {
     name: 'rollup-plugin-terser-simple',
-    renderChunk (source, chunk, options) {
-      const { code, map } = terser.minify(source, {
+    async renderChunk (source, chunk, options) {
+      const { code, map } = await terser.minify(source, {
         compress: {
           global_defs: {
             'typeof self': '"object"',

src/worker.js

@@ -92,7 +92,7 @@ export async function process ({ file, source, map, options = {} }) {
 
   if (minify) {
     start('modern-minify');
-    const minified = terser.minify(modern.code, {
+    const minified = await terser.minify(modern.code, {
       // Enables shorthand properties in objects and object patterns:
       ecma: 2017,
       module: false,

test/_util.js

@@ -14,12 +14,11 @@
  * the License.
  */
 
+import { promises as fs } from 'fs';
 import path from 'path';
 import { gzip as gzipSync } from 'zlib';
 import util from 'util';
-import webpack from 'webpack';
 import CleanPlugin from 'clean-webpack-plugin';
-// import TerserPlugin from 'terser-webpack-plugin';
 
 export function sleep (ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
@@ -58,7 +57,7 @@ export async function printSizes (assets, name, console) {
   console.log(str);
 }
 
-export function runWebpack (fixture, { output = {}, plugins = [], module = {}, resolve = {}, ...config } = {}, console) {
+export function runWebpack (webpack, fixture, { output = {}, plugins = [], module = {}, resolve = {}, ...config } = {}, console) {
   return run(callback => webpack({
     mode: 'production',
     devtool: false,
@@ -83,7 +82,7 @@ export function runWebpack (fixture, { output = {}, plugins = [], module = {}, r
   }, callback), console);
 }
 
-export function watchWebpack (fixture, { output, plugins, context, ...config } = {}, console) {
+export function watchWebpack (webpack, fixture, { output, plugins, context, ...config } = {}, console) {
   context = context || path.resolve(__dirname, 'fixtures', fixture);
   const compiler = webpack({
     mode: 'production',
@@ -100,20 +99,27 @@ export function watchWebpack (fixture, { output, plugins, context, ...config } =
   return compiler;
 }
 
-export function statsWithAssets (stats) {
-  stats.assets = Object.keys(stats.compilation.assets).reduce((acc, name) => {
-    acc[name] = stats.compilation.assets[name].source();
-    return acc;
-  }, {});
-  return stats;
+export async function statsWithAssets (stats) {
+  const assets = Object.keys(stats.compilation.assets);
+  const basePath = stats.compilation.outputOptions.path;
+  const contents = {};
+
+  await Promise.all(assets.map(async (asset) => {
+    const assetPath = path.join(basePath, asset);
+    const content = await fs.readFile(assetPath, 'utf8');
+
+    contents[asset] = content;
+  }));
+
+  stats.assets = contents;
 }
 
 function run (runner, console) {
   return new Promise((resolve, reject) => {
-    runner((err, stats) => {
+    runner(async (err, stats) => {
       if (err) return reject(err);
 
-      statsWithAssets(stats);
+      await statsWithAssets(stats);
 
       stats.info = stats.toJson({ assets: true, chunks: true });
 

test/_webpacks.js

@@ -0,0 +1,4 @@
+export const webpacks = [
+  [5, require('webpack'), require.resolve('ts-loader')],
+  [4, require('webpack-4/node_modules/webpack'), require.resolve('webpack-4/node_modules/ts-loader')]
+];

test/fixtures/basic/entry.js

@@ -15,3 +15,7 @@
  */
 
 console.log('hello world');
+
+Object.defineProperty(window, 'test', {
+  value: 'hello world'
+});