javascript - 防止文件生成新版本 - Webpack

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 触发新构建？

Updating the question for better understanding

我正在开发一个使用 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/

希望对你有帮助