feat: support Webpack SplitChunksPlugin

[anka-213]

The SplitChunksPlugin uses a slightly different format for the main bundle that the current pattern doesn't recognize.

For example, the end looks like this:

/******/ 	// Load entry module and return exports
/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["main-src_1"], () => (__webpack_require__("./src/index.js")))
/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);

instead of ending on an IIFE like the code expects.

I'm currently working on adding support for this.

[pionxzh]

Nice. Let me know if you need any help.

[anka-213]

I realized that the interface isn't trivial since most current components expect a single file, instead of multiple chunks. But I could at least try to make it unpack the main file successfully.

[anka-213]

Actually, I think this may be the only real issue. Other than outputting:

Entry module is not an IIFE

it seems to work fine

[pionxzh]

I think CLI supports unpacking multiple files, but you are right, most of the components were designed to accept a single file initially. We could adjust it to accept multiple files and merge the results. You were talking about the playground, right?

[anka-213]

Hmm, there has to be an easier way to do this!

    else if (j.ExpressionStatement.check(lastStatement)
          && lastStatement.expression.type === 'AssignmentExpression'
          && j.AssignmentExpression.check(lastStatement.expression)
          && j.CallExpression.check(lastStatement.expression.right)
          && j.Identifier.check(lastStatement.expression.left)
          && j.Identifier.check(lastStatement.expression.right.arguments[0])
          && lastStatement.expression.left.name === lastStatement.expression.right.arguments[0].name) {
        const secondToLastStatement = statementsInBootstrap[statementsInBootstrap.length - 2]
        if (j.VariableDeclaration.check(secondToLastStatement)
          && secondToLastStatement.declarations.length === 1
          && secondToLastStatement.declarations[0].type === 'VariableDeclarator'
          && secondToLastStatement.declarations[0].id.type === 'Identifier'
          && secondToLastStatement.declarations[0].id.name === lastStatement.expression.left.name
          && secondToLastStatement.declarations[0].init?.type === 'CallExpression'
          && secondToLastStatement.declarations[0].init.arguments.length === 3
          && secondToLastStatement.declarations[0].init.arguments[1].type === 'ArrayExpression'
          && (secondToLastStatement.declarations[0].init.arguments[2].type === 'ArrowFunctionExpression'
           || secondToLastStatement.declarations[0].init.arguments[2].type === 'FunctionExpression'
          )
          && secondToLastStatement.declarations[0].init.arguments[2].params.length === 0
          && secondToLastStatement.declarations[0].init.arguments[2].body.type === 'CallExpression'

        // Match against
        // var __webpack_exports__ = __webpack_require__.O(undefined, ["main-src_1"], () => (__webpack_require__("./src/index.js")))
        // __webpack_exports__ = __webpack_require__.O(__webpack_exports__);

[pionxzh]

You can use match function to simplify it.

j.match(secondToLastStatement, {
  type: 'VariableDeclaration',
  declarations: [
    {
      type: 'VariableDeclarator',
      id: {
        type: 'Identifier',
        name: lastStatement.expression.left.name,
      },
      init: {
        type: 'CallExpression',
        arguments: (args) => {
          return args.length === 3
        && args[1].type === 'ArrayExpression'
        && (args[2].type === 'ArrowFunctionExpression'
        || args[2].type === 'FunctionExpression'
        )
        && args[2].params.length === 0
        && args[2].body.type === 'CallExpression'
        },
      },
    },
  ],
})