完全静态项目的 Webpack根本没有 JS/TS

问题描述

我的项目是一个由多个 JSON 文件组成的 JSON 模式：

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

我想要做的就是用 version 中的版本替换此文件中的 package.json 占位符。 IE。 a.json 在它的 ${version} 中包含一个 $id（实际语法是任意的，我没有任何偏好）占位符：

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

而且，假设 version 中的 package.json 是 1.0.0 我想处理这个 JSON 并得到：

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

就是这样。它可以通过这样的脚本来实现（在 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？

解决方法

试试这个：

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

顺便说一句，如果您已经知道如何使用基本脚本来执行此操作，那么您不知道为什么要使用 webpack 执行此操作，因此您可以在 webpack 构建之前或之后执行此操作。

copy-webpack-plugin webpack webpack webpack webpack-config