Запретить файлу генерировать новую сборку - Webpack

Question

У меня есть приложение с nuxt.js / Vue.

Я создал плагин Webpack, чтобы при каждом изменении файла создавался index.js в определенной директории.

Проблемав том, что когда генерируется index.js, Webpack распознает это как новое изменение и строит заново, поэтому он остается в этом бесконечном цикле ...

Чтобы обнаружить изменения, я использую перехватчики webpack

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

как я могу предотвратить запуск index.js новой сборки?

Обновление вопроса для лучшего понимания

I 'работает над приложением, созданным с помощью vue.js |nuxt.js и структура этого компонента

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

Мне нужно выполнить именованный и сгруппированный импорт, например так:

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

, но для этого мне понадобится индекс.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()
    ],
  }
}

in 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

Вы добавили новый файл / каталог в список исключенных веб-пакетов? Если нет, то свойство 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 
});

Я превратил это в библиотеку, возможно, это помогает другим людям

Плагин Weback - именованный экспорт