4

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 ?

D4rth B4n3
  • 1,268
  • 2
  • 17
  • 26
  • It is probably better to create some node script instead and just run it after webpack. Something like this: `webpack && node script.js` – Arseniy-II Nov 19 '19 at 08:54
  • Well thats kinda what I'm doing right now but we have many scripts setup for different builds in ci and test mode etc which makes its cumbersome if something changes. Also I'm curious how webpack works. – D4rth B4n3 Nov 19 '19 at 08:58
  • In that case you probably should google "how to write webpack plugin". [Official docs](https://webpack.js.org/contribute/writing-a-plugin/) – Arseniy-II Nov 19 '19 at 09:02
  • 1
    Well thanks for that very helpfull hint. I wouldn't be here asking a specific question on how to get the changed files out of webpack if I hadnt spent a whole day googling about it – D4rth B4n3 Nov 19 '19 at 09:08

1 Answers1

2

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/

l00k
  • 1,525
  • 1
  • 19
  • 29
  • Yeah I tried that. Problem here was that I cant test for the en.js file since it never changes. If I test for the ref.js file it kinda works but also misuses the loader since it is meant to work on a per file basis transforming the content of a single file which I then do not do. – D4rth B4n3 Nov 19 '19 at 09:11
  • Right, intentionally loader should be used to transform and combine files into one. but does it have to be used like that? For example style loaders may produce output into separate file. You can define your loader in such way to produce en.js not whole bundle – l00k Nov 19 '19 at 09:19
  • 2
    I guess it does not, yet the other problem (sorry forgot to mention it) was that it would not work on a regular build. probably because the ref.js file is never referenced (which is correct it should not be part of the build/output) anywhere and therefore the loader wont be triggered in normal build mode – D4rth B4n3 Nov 19 '19 at 09:22
  • @D4rthB4n3 yeap, now I see – l00k Nov 19 '19 at 09:40