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