6-webpack使用watch时实打包

在刚学习 webpack 的时候，总是需要反复执行npm run build来执行打包

时间久了觉得不胜其烦，在和npm run build 运行的当时怎么能解决自动的实时去打包更新 dist 里的文件

在 webpack.config.js配置 watch和watchOptions来监听代码变化，进行自动打包,刷新浏览器最新结果

module.exports={
    mode:'development',
    // 入口
    entry:'./src/index.js',
    output:{
        filename:'bundle.[hash:8].js',  //添加[hansh]  防止内存覆盖也缓存问题
        path:path.resolve(__dirname,'dist')  //解析出一个绝对路径  \MYPRO\dist
    },
    watch:true,
    watchOptions:{
        poll:1000,  //轮询间隔时间
        aggregateTimeout:500, //防抖（在输入时间停止刷新计时）
        ignored:/node_modules/
    },
    plugins:[
        new HTMLWebpackPlugin({
            template:'./index.html',
            filename:'index.html',
        })
    ],
    devtool:'source-map'
    ,

注意：在vscode 的终端输入命令执行的不会自动刷新，编辑完代码以后，ctrl+s 才会刷新打包文件