webpack-compile-loader

| Exprimental loader!!!

Loader for the Webpack (5+) that allows you to import any data

Example usage

// test.compile.js
export default "{hello: 'World'}"

Getting started

Add a webpack rule for unique filename pattern (e.g. *.compile.js)

{
    test: /\.compile\.js$/,
    use: [{ loader: 'webpack-compile-loader' }],
}

Create file with pattern matched name and ensure it exports string that contains javascript code. If you're planing to export structured data, you can use method JSON.stringify to prepare data.

// test.compile.js
export default JSON.stringify({hello: 'World'});

import testData from './test.compile.js'
console.log(testData.hello);
// "World"

Async

Your module can exports Promise or result of an async function. Here is an example of how to async list subdirectories of the project's source directory:

// listSrc.compile.js
const glob = require('glob')
const util = require('util')

const asyncGlob = util.promisify(glob)

async function listProjectSrcFiles() {
  const files = await asyncGlob('src/*', { cwd: process.cwd() })
  return JSON.stringify({
    files,
  })
}

exports.default = listProjectSrcFiles()

In webpack's application code just import this file to get generated data at the build time:

import srcFiles from './listSrc.compile.js'

console.log(srcFiles); // { files: [...] }

Options

useRequire: false By the default loader uses class Module to compile source code. You can enforce using require function by passing true to this option. But keep in the mind that useRequire: true disables ability to precompiling.

Supported platforms

Webpack >=5, Node >=6