[英]Prevent file from generating new build - Webpack
I have an application with nuxt.js / Vue. 我有一个nuxt.js / Vue的应用程序。
I created a Webpack Plugin so that with each file changed, generate an index.js
in a certain directory. 我创建了一个Webpack插件,以便在每个文件都更改后,在某个目录中生成一个
index.js
.
The problem is that when index.js
is generated, Webpack recognizes this as a new change and build again, so it stays in that infinite loop ... 问题是当生成
index.js
时,Webpack将此识别为新的更改并再次构建,因此它将保持在无限循环中...
To detect changes, I'm using webpack hooks 为了检测更改,我正在使用webpack挂钩
compiler.hooks.beforeCompile.tapAsync('MyPlugin', (params, callback) => {
// script to generate an index.js in a given directory
});
how can I prevent index.js
from triggering a new build? 如何防止
index.js
触发新构建?
Updating the question for better understanding
更新问题以便更好地理解
I'm working on an application made with vue.js | 我正在研究用vue.js制作的应用程序 nuxt.js and this component structure
nuxt.js和这个组件结构
├── components
│ ├── quarks
│ │ └── ...
│ ├── bosons
│ │ └── GridLayout.vue
│ │ └── ...
│ ├── atoms
│ │ └── ButtonStyle.vue
│ │ └── InputStyle.vue
│ │ └── ...
│ ├── molecules
│ │ └── ...
│ ├── organisms
│ │ └── ...
│ ├── templates
│ │ └── ...
└─────
I need to do named and grouped imports, like this: 我需要做命名和分组导入,如下所示:
import { ButtonStyle, InputStyle } from '@/components/atoms/'
but for this to work out I would need to have an index.js inside each folder exporting component by component, example 但为了解决这个问题,我需要在每个文件夹中有一个index.js,逐个组件导出组件,例如
├── components
│ ├── atoms
│ │ └── ButtonStyle.vue
│ │ └── InputStyle.vue
│ │ └── index.js
└─────
and in index.js
并在
index.js
export { default as ButtonStyled } from './ButtonStyled.vue'
export { default as InputStyle } from './InputStyle.vue'
But doing this work manually can be a very tiresome task. 但手动完成这项工作可能是一项非常烦人的任务。 Every time you create, delete, rename a component, you would have to update the
index.js
of your respective folder. 每次创建,删除,重命名组件时,都必须更新相应文件夹的
index.js
。
so I started to develop a solution 所以我开始开发一个解决方案
in nuxt.config.js
在
nuxt.config.js
import NamedExports from './plugins/NamedExports.js'
export default {
// ... other config here ...
build: {
plugins: [
new NamedExports()
],
}
}
in plugins/NamedExports.js
在
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
but whenever the plugin creates an index.js
, a new build is triggered 但只要插件创建了
index.js
,就会触发新的构建
Have you added the new file/directory to WebPacks exclude list? 您是否已将新文件/目录添加到WebPacks排除列表中? If not, the watchOptions.ignore property might be just what your looking for: https://webpack.js.org/configuration/watch/
如果没有,watchOptions.ignore属性可能正是您所寻找的: https ://webpack.js.org/configuration/watch/
Hope this helps 希望这可以帮助
I use a hook that runs only once and I use chokidar
to listen for changes in the components directory 我使用只运行一次的钩子,我使用
chokidar
来监听组件目录中的更改
compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
// generates index.js
// Watch a directory with chokidar
});
I turned this into a library, maybe it helps other people 我把它变成了一个图书馆,也许它可以帮助其他人
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.