在Webpack5中,compiler.watchFileSystem.watcher
对象上确实没有mtime
属性,但可以通过其他方式获取已更改文件的列表。
一种方法是使用webpack-dev-middleware
中间件来监听文件更改并获取更改的文件列表。该中间件可以与Express或Koa等服务器框架一起使用。以下是一个示例代码:
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);
// 使用webpack-dev-middleware中间件
app.use(webpackDevMiddleware(compiler, {
// 配置选项
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300, // 延迟构建时间
poll: 1000 // 轮询间隔
}
}));
// 监听Webpack编译完成事件
compiler.hooks.done.tap('DonePlugin', (stats) => {
// 获取已更改的文件列表
const changedFiles = stats.compilation.fileDependencies.filter((file) => {
return file && compiler.watchFileSystem.watcher.mtimes[file];
});
// 打印已更改的文件列表
console.log('Changed files:', changedFiles);
});
另一种方法是使用webpack-plugin-chokidar
插件来监听文件更改并获取更改的文件列表。该插件基于Chokidar库,可以与Webpack插件一起使用。以下是一个示例代码:
const ChokidarPlugin = require('webpack-plugin-chokidar');
const config = require('./webpack.config.js');
const compiler = webpack(config);
// 添加ChokidarPlugin插件
compiler.options.plugins.push(new ChokidarPlugin());
// 监听Webpack编译完成事件
compiler.hooks.done.tap('DonePlugin', (stats) => {
// 获取已更改的文件列表
const changedFiles = stats.compilation.fileDependencies.filter((file) => {
return file && compiler.watchFileSystem.watcher.mtimes[file];
});
// 打印已更改的文件列表
console.log('Changed files:', changedFiles);
});
无论使用哪种方法,都可以通过监听Webpack编译完成事件,在stats.compilation.fileDependencies
中过滤出已更改的文件列表。这些文件列表可以用于进一步的处理,例如重新构建、刷新浏览器等。
请注意,以上示例代码中的config
是Webpack的配置文件,你需要根据自己的项目配置进行相应的修改。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和对象存储(COS)。
希望以上信息对你有帮助!
领取专属 10元无门槛券
手把手带您无忧上云