如何打破webpack挂钩中的循环

Question

我正在使用nuxt.js项目，我需要在每个更改的文件（即每个Webpack构建）上运行Shell脚本。

所以我正在使用Webpack挂钩

我创建了Webpack插件

/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"

此脚本用于在组件目录的每个文件夹中进行命名导出，例如

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

然后生成 components/atoms/index.js

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

我在nuxt.config.nuxt或中注册了插件webpack.config.js

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

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

但是当我运行我的应用程序并更改任何文件时，服务器会说已经进行了更改components/atoms/index.js，然后完成了新的构建，因此它获得了无限的构建。

有人可以帮我打破这个循环吗？

对于何时更改文件，只需生成新的index.js而不生成无限构建

提前致谢

Answer 1

我创建了一个库并解决了我的问题，下面是链接：

Weback 插件 - 命名导出