Webpack for completely static project (no JS / TS at all)

Question

My project is a JSON schema consisting of multiple JSON files:

src
├── a.json
├── b.json
└── c.json

All I want to do is to replace a version placeholder in this files with a version from package.json . Ie a.json contains a ${version} (actual syntax is arbitrary, I don't have any preferences) placeholder in it's $id :

{
  "$schema": "http://json-schema.org/schema#",
  "$id": "https://foo.bar/${version}/a.json",
  "type": "object",
  …
}

And, assuming the version in package.json is 1.0.0 I want to process this JSON and get:

{
  "$schema": "http://json-schema.org/schema#",
  "$id": "https://foo.bar/1.0.0/a.json",
  "type": "object",
  …
}

And that's it. It can be achieved by a script like this (in package.json ):

"scripts": {
  "build": "rm -rf dist && mkdir dist && cp src/*.json dist/ && sed -i'' -e \"s/\\${version}/$npm_package_version/\" dist/*.json",
}

But how do I do it with Webpack?

I know about copy and define plugins, but it seems that I need actual source in my project to be an entry point for Webpack. A config like this:

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
    mode: 'none',
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: "src/*.json",
                },
            ],
        }),
    ],
};

Copies files to dist (or wherever I want), but gives an error:

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/madhead/Projects/schema'

Another question here is how to copy and process those files (replace placeholders).

How do I only copy and process those JSONs with Webpack?

Answer 1

Try this one:

new CopyWebpackPlugin([
    {from: 'src/*.json',
        to: '[name].[ext]',
        transform(content) {
            return content.toString().replace(/\${version}/g, '1.0.12');
        }
    }
])

And btw have no idea why you want to do this with webpack if you already know how to do it with basic script so you can just do it before or after webpack build.