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',
    },
  },
},

基本上，用它的值替换测试键下的对象。

现在，我们在后台运行了一个文件监视程序，它在每次更改en.js文件时生成ref.js文件。我想要的是将这一代en.js集成到webpack的构建过程中。

所需经费如下：

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

时生成en.js

我试着写了一个webpack插件，但没走多远。我认为这些步骤如下：

initilially)

• tap
• 点击beforeRun钩子(将文件生成为
• ？/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/