how to break loop in webpack hook

Question

I'm working with a project nuxt.js, I need to run a shell script on every changed file, that is, every webpack build.

so I'm using the Webpack Hooks

I created my Webpack Plugin

/plugins/NamedExports.js

const pluginName = 'NamedExports'
const { exec } = require('child_process')

class NamedExports {
  apply(compiler) {
    compiler.hooks.beforeCompile.tap(pluginName, (params, callback) => {
      exec('sh plugins/shell.sh', (err, stdout, stderr) => {
        console.log(stdout)
        console.log(stderr)
      })
    })
  }
}

export default NamedExports

plugins/shell.js

parameters=$(ls components)
for item in ${parameters[*]}
do
    ls components/$item/ | grep -v index.js | sed 's#^\([^.]*\).*$#export { default as \1 } from "./&"#' > components/$item/index.js
done

echo "worked"

this script is to make named exports within each folder in the component directory, example

components/atoms/ButtonStyled.vue components/atoms/BoxStyled.vue

then it is generated components/atoms/index.js

export { default as ButtonStyled } from "./ButtonStyled.vue"
export { default as BoxStyled } from "./BoxStyled.vue"

I registered my Plugin in nuxt.config.nuxt or webpack.config.js

import NamedExports from './plugins/NamedExports.js'

export default {
  // ... other config here ...
  build: {
    plugins: [
      // ... other plugins here ...
      new NamedExports()
    ],
  }
}

but when I run my app and change any file, the server says that a change has been made to components/atoms/index.js and then a new build is done, so it gets infinite build.

Can someone help me break this loop?

for when to change a file, simply generate new index.js and not generate infinite builds

thanks in advance

Answer 1

I created a library and solved my problems, below is the link:

Weback Plugin - named-exports