Question

我有一个使用nuxt.js / Vue的应用程序。

我创建了一个Webpack插件，以便在更改每个文件的情况下，在特定目录中生成一个index.js。

问题在于，当生成index.js时，Webpack将其识别为新的更改并再次构建，因此它停留在无限循环中……

要检测更改，我正在使用webpack hooks

compiler.hooks.beforeCompile.tapAsync('MyPlugin', (params, callback) => {
  // script to generate an index.js in a given directory
});

如何防止index.js触发新的构建？

更新问题以更好地理解

我正在使用vue.js制作应用程序| nuxt.js和此组件结构

├── components
│   ├── quarks
│   │   └── ...
│   ├── bosons
│   │   └── GridLayout.vue
│   │   └── ...
│   ├── atoms
│   │   └── ButtonStyle.vue
│   │   └── InputStyle.vue
│   │   └── ...
│   ├── molecules
│   │   └── ...
│   ├── organisms
│   │   └── ...
│   ├── templates
│   │   └── ...
└─────

我需要进行命名和分组导入，如下所示：

import { ButtonStyle, InputStyle } from '@/components/atoms/'

但是要解决这个问题，我需要在每个文件夹中逐个导出组件（例如，示例）中有一个index.js

├── components
│   ├── atoms
│   │   └── ButtonStyle.vue
│   │   └── InputStyle.vue
│   │   └── index.js
└─────

和index.js

中

export { default as ButtonStyled } from './ButtonStyled.vue'
export { default as InputStyle } from './InputStyle.vue'

但是手动完成这项工作可能是一项非常艰巨的任务。每次创建，删除，重命名组件时，都必须更新各自文件夹的index.js。

所以我开始开发解决方案

在nuxt.config.js

中

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

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

在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.sh

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

但是只要插件创建index.js，就会触发新的构建

Answer 1

您是否已将新文件/目录添加到WebPacks排除列表？如果不是，那么watchOptions.ignore属性可能正是您要查找的内容： https://webpack.js.org/configuration/watch/

希望这会有所帮助

Answer 2

我使用仅运行一次的钩子，并使用chokidar监听组件目录中的更改

compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
  // generates index.js
  // Watch a directory with chokidar 
});

我把它变成了图书馆，也许对其他人有帮助

阻止文件生成新版本-Webpack

2 个答案:

Weback Plugin - named-exports