Webpack generate file on build

Question

In my project at work we use Vue with VueI18n for localization. We have one ref.js file which looks like this:

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

This ref file is needed for the translation team and is our 'single source of truth'. Now on build an en.js file is supposed to be generated. The en.js file would look like this:

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

Basically replacing the object under the test key with only its value.
Right now we have a file watcher running in the background which generates the en.js file every time the ref.js file changes. What I would like is to integrate this en.js generation into the webpack build process.
Requirements are:

• Generates en.js file on initial build
• Watches the ref.js file and generates en.js when ref.js file changes

I tried writing a webpack plugin but didn't get very far. I think the steps would be as follows:

• tap into beforeRun hook (generate file initilially)
• tap into watchRun?/beforeCompile? -> check changed files and if ref.js is among them -> generate file

What I dont understand is where/how do I see which files have changed ?

Answer 1

I would suggest you to create loader. You can define rule for your source file (ref.js) and your parser (loader) which will transform source into prefered form.

webpack.config.js

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

How to write a loader:
https://webpack.js.org/contribute/writing-a-loader/