webpack没有修改文件，但是仍然自动重建？

Question

用webpack的watch mode监听文件改变并自动重建，文件没有修改仍然自动重建。

录了一个视频（给watchOptions加了5秒的aggregateTimeout，不然会刷的更快）

https://v.qq.com/x/page/u3324...

// webpack.config.base.js

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

const webpackConfig = {
    resolve: {
        extensions: ['.js', '.ts']
    },
    optimization: {
        minimize: false,
        moduleIds: 'named',
    },
    entry: './src/index.ts',
    output: {
        publicPath: path.resolve(__dirname, '../dist'),
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
            },
            {
                test: /\.m?js/,
                resolve: {
                  fullySpecified: false,
                },
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
}

module.exports = webpackConfig

// webpack.config.dev.js

const path = require('path')
const { merge } = require('webpack-merge')
const LiveReloadPlugin = require('webpack-livereload-plugin')
const UserScriptMetaDataPlugin = require('userscript-metadata-webpack-plugin')

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

const metadata = require('./metadata.js')
const webpackConfig = require('./webpack.config.base.js')

metadata.name = 'NO-Flash-Upload(dev)'
metadata.require.push(
    'file://' + path.resolve(__dirname, '../dist/index.debug.user.js')
)

const cfg = merge(webpackConfig, {
    entry: {
        debug: webpackConfig.entry,
        dev: path.resolve(__dirname, './dev.js') // Generate index.dev.user.js
    },
    output: {
        filename: 'index.[name].user.js',
        path: path.resolve(__dirname, '../dist'),
    },
    devtool: 'eval-source-map',
    watch: true,
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 5000,
    },
    plugins: [
        new LiveReloadPlugin({
            delay: 500,
            protocol: "https"
        }),
        new UserScriptMetaDataPlugin({
            metadata,
        }),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    stats: 'verbose'
})

module.exports = cfg

Answer 1

解决了，原因是我正在使用Element-Plus的自动导入功能：

AutoImport({resolvers: [ElementPlusResolver()]}) 和 Components({ resolvers: [ElementPlusResolver()] }), 会修改 auto-imports.d.ts 和 components.d.ts 两个文件，把这两个文件ignore或者想办法替代这个插件

ignore方法：修改webpack.config.dev.js

  watch: true,
  watchOptions: {
    ignored: ["**/node_modules", "**/auto-imports.d.ts", "**/components.d.ts"],
  },

[Github]执行npm run dev后项目重复循环构建