Webpack 用於完全 static 項目（根本沒有 JS / TS）

Question

我的項目是一個 JSON 架構，由多個 JSON 文件組成：

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

我要做的就是用package.json中的版本替換此文件中的version占位符。 即a.json包含一個${version} （實際語法是任意的，我沒有任何偏好）占位符$id ：

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

並且，假設package.json中的version是1.0.0我想處理這個 JSON 並得到：

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

就是這樣。 它可以通過這樣的腳本來實現（在package.json中）：

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

但是我該如何使用 Webpack 呢？

我知道復制和定義插件，但似乎我需要項目中的實際源代碼作為 Webpack 的入口點。 像這樣的配置：

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

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

將文件復制到dist （或我想要的任何地方），但給出錯誤：

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

這里的另一個問題是如何復制和處理這些文件（替換占位符）。

如何僅使用 Webpack 復制和處理這些 JSON？

Answer 1

試試這個：

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

順便說一句，如果您已經知道如何使用基本腳本執行此操作，那么您不知道為什么要使用 webpack 執行此操作，因此您可以在 webpack 構建之前或之后執行此操作。