如何打破 webpack 钩子中的循环

Posted 2023-02-22

技术标签:

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

我正在处理一个项目 nuxt.js，我需要在每个更改的文件上运行一个 shell 脚本，即每个 webpack 构建。

所以我使用Webpack Hooks

我创建了我的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"

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

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 而不是生成无限构建

提前致谢

【问题讨论】：

【参考方案1】：

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

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

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

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

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

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