Import Chunkname with Babel Plugin

• JavaScript

默认情况下，Webapck 会用 Chunk ID 为 import() 产生的独立文件命名，最终的结果就是类似于 0.bundle.js 这样的文件。这样的文件并不方便理解和管理，所以一般会使用 webpackChunkName 这个注释来让 Webapck 使用更加有意义的命名。例子：

import(/* webpackChunkName: "module-name" */ 'path-to-bundle');

最终产生的文件为 module-name.bundle.js（这里假设在 Webpack 中配置了 output.filename 为 [name].bundle.js）。

然而，每次要手写这样的注释有些麻烦。如果动态加载的模块本身存放位置有规律可循（比如是在 pages 目录下，每个目录有一个入口文件），那么也可以考虑使用 Babel 插件的方式，自动为每个 import() 增加合适的 bundle name。

参考代码如下：

function addComments(arg, name) {
  // only add leading comment when not found
  if (arg.leadingComments) return;
  arg.leadingComments = [{
    type: 'CommentBlock',
    value: ` webpackChunkName: '${name}' `,
  }];
}

function getChunkNameFromImportPath(importPath) {
  // find a way to transform from import path to chunk name
  // example: from 'path/to/file' to 'path.to.file' as chunk name
  return importPath.replace(/\//g, '.');
}

module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: 'add-bundle-name',
    visitor: {
      CallExpression: function(path) {
        const { node } = path;
        if (!t.isImport(node.callee)) return;
        const [firstArg] = node.arguments;
        const importPath = firstArg.value;
        addComments(firstArg, getChunkNameFromImportPath(importPath));
      },
    },
  }
}