webpack之文件监听

webpack中的文件监听

 文件监听是在源代码发生变化时,自动构建出新的输文件。

webpack开启监听模式,有两种方式:

1.启动webpack时,带上--watch参数,可以在package.json中配置

 "watch":"webpack --watch"

2.在webpack.config.js中设置watch:true

module.exports={
    watch:true,  //默认为false,也就是不开启
    //只有开启监听模式时,watchOptions才有意义
    watchOptions:{
        //默认为空,不监听的文件或者文件夹,支持正则匹配
        ignored:/node_modules/,
        //监听到变化后会等300ms再去执行,默认为300ms
        aggregateTimeout:300,
        //判断文件发生变化是通过不停询问系统指定的文件有没有变化实现的,默认每秒询问一次
        poll:1000

    }
}

 

在使用Webpack 5和serve进行开发时,修改serve监听的目录主要涉及更改`serve`的配置。这可以通过以下步骤完成: 首先,你需要确认你的项目中是否已经安装了`serve`和`webpack-cli`这两个包。如果没有,请通过npm或yarn进行安装。 ```bash npm install -g serve webpack-cli ``` 或者 ```bash yarn global add serve webpack-cli ``` 然后,你可以在项目的根目录下创建一个新的`serve.js`文件,并在其中添加以下代码: ```javascript const path = require('path'); const Webpack = require('webpack'); const webpack = require('webpack-cli').Webpack; const serve = require('serve'); // 监听的目录路径 const dir = './src'; // 创建新的server实例 const server = serve.createServer({ root: dir }); // 监听端口,例如8080 server.listen(8080, 'localhost', (err) => { if (err) { console.error(err); process.exit(1); } else { console.log(`Server is running on port ${8080}`); } }); // 在此监听的目录中引入webpack配置,并进行初始化工作。请根据你的实际配置修改这里。 // Webpack的配置项如:output.path、output.filename等都应在src文件夹内对应的.js文件中配置。 const compiler = webpack({ // 在此处定义webpack的配置选项 mode: 'development', // 可以根据你的实际需要更改这一项为production等模式 // 其他配置选项... }); compiler.hooks.watchRun.tap('MyPlugin', (type, compilation) => { // 这里可以在webpack运行过程中做额外操作。你可以在.js文件中定义你的MyPlugin。 // 在这里进行你需要的操作... }); ``` 注意,你需要根据实际情况调整Webpack的配置,并确保所有必要的Webpack插件和加载器都已正确安装和配置。这个例子中假设你已经定义了正确的Webpack配置和插件。你可能需要使用到如`HtmlWebpackPlugin`等插件来生成HTML文件。 最后,你需要在你的项目根目录下运行以下命令启动服务器: ```bash node serve.js ``` 这样,你的Webpack配置就会监听你指定的目录了。你可以根据需要修改监听的目录路径和端口号。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值