magic-comments

✨ magic-comments

Tooling utility to add configurable webpack magic comments to dynamic import() expressions at build time.

Useful when working with:

• Babel plugins
• Webpack loaders
• Vite plugins
• Anywhere you want to add magic comments to your source code before running through webpack.

Getting Started

First install magic-comments:

npm install magic-comments

Next generate an AST or RegExp that provides the following information for each file processed:

• The absolute filename of the file being processed (modulePath).
• The import specifier used in the dynamic imports found (importPath).

Then pass that information along to magic-comments to generate a magic comment that can be inserted into an import() expression:

src/file.js

const mod = import('./folder/module.js')

tooling

import { getMagicComment } from 'magic-comments'

const modulePath = resolve(directory, './src/file.js')
const code = fs.readFileSync(modulePath)
const ast = parse(code)
const dynamicImportsMeta = getDynamicImportMetaFrom(ast)

dynamicImportsMeta.forEach(meta) => {
  const magicComment = getMagicComment({
    modulePath,
    importPath: meta.importPath,
    options: {
      webpackChunkName: ['**/src/**/*.js'],
      webpackMode: 'eager'
      webpackFetchPriority: 'high'
    }
  })

  // prints /* webpackChunkName: "folder-module", webpackMode: "eager", webpackFetchPriority: "high" */
  console.log(magicComment)
})

Examples

• babel-plugin-magic-comments
• magic-comments-loader