javascript - Webpack 在构建时生成文件

Question

在我的工作项目中，我们使用 Vue 和 VueI18n 进行本地化。我们有一个 ref.js 文件，如下所示:

export default {
  project: {
    lang: {
      test: {
        value: 'The test was a success',
        context: 'This string is a test string',
      },
    },
  },
},

翻译团队需要此引用文件，并且是我们的“单一事实来源”。现在构建时应该生成一个 en.js 文件。 en.js 文件如下所示:

export default {
  project: {
    lang: {
      test: 'The test was a success',
    },
  },
},

基本上仅用其值替换测试键下的对象。
现在，我们有一个在后台运行的文件观察器，每次 ref.js 文件发生更改时，它都会生成 en.js 文件。我想要的是将这个 en.js 生成集成到 webpack 构建过程中。
要求是:

• 在初始构建时生成 en.js 文件
• 监视 ref.js 文件并在 ref.js 文件更改时生成 en.js

我尝试编写一个 webpack 插件，但没有取得多大进展。我认为步骤如下:

• 点击 beforeRun 钩子(Hook)(首先生成文件)
• 点击 watchRun?/beforeCompile? -> 检查更改的文件以及 ref.js 是否在其中 -> 生成文件

我不明白的是我在哪里/如何查看哪些文件已更改？

Answer 1

我建议你创建加载程序。您可以为源文件(ref.js)和解析器(加载器)定义规则，它将源文件转换为首选形式。

webpack.config.js

module.exports = {
    (...)
    module: {
        rules: [
            {
                test: /ref\.js$/,
                loader: 'your-magic-loader',
            },
         (...)
        ]
    }
}

如何编写加载器:
https://webpack.js.org/contribute/writing-a-loader/