CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-serverwebpack-4webpack-plugin
D4rth B4n3
D4rth B4n3

Reputation: 1278

Webpack generate file on build

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:

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

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

Upvotes: 4

Views: 6465

Answers (1)

l00k
l00k

Reputation: 1545

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/

Upvotes: 2

Related Questions