如何打破 webpack 钩子中的循环答案

【问题标题】：how to break loop in webpack hook如何打破 webpack 钩子中的循环
【发布时间】：2019-11-01 15:11:30
【问题描述】：

我正在处理一个项目 nuxt.js，我需要在每个更改的文件上运行一个 shell 脚本，即每个 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 而不是生成无限构建

提前致谢

【问题讨论】：

标签： javascript node.js vue.js webpack nuxt.js

【解决方案1】：

问题显然是新文件重新触发构建。从概念上讲，有几种方法可以解决这个问题。

1) 如果文件被更新，不要输出新文件。您需要为此比较时间戳。可能会很乱。

2) 编写一个加载器。匹配components/**/index.js，为其输出正确的javascript。确保无状态。 IE。不要输出另一个文件，只输出一个字符串。

然后将虚拟文件放在每个目录中，并附上由 webpack 插件自动生成的注释。

如果你的虚拟文件告诉 webpack 如何生成它就更好了。

https://webpack.js.org/contribute/writing-a-loader/

【讨论】：

【解决方案2】：

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

Weback Plugin - named-exports

【讨论】：