阻止文件生成新的構建 - 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觸發新構建？

更新問題以便更好地理解

我正在研究用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 
});

我把它變成了一個圖書館，也許它可以幫助其他人

Weback插件 - 命名導出