webpack抽离公共代码和热更新

抽离公共代码

module.exports里配置属性对象

optimization:{ //执行是自上而下的
    splitChunks:{ //分割代码块
      cacheGroups:{ //缓存组
        // 抽离自定义模块
        common:{ //抽离出来代码自动创建在名为common开头的文件中
          chunks: 'initial',  //从入口开始提取代码
          minSize:0, //共用字节大于0即抽离
          minChunks:2 //引用2次就打包
        },
        // 抽离第三方库
        vendor:{
          priority:1, // 抽离的优先级，默认为0
          test: /node_modules/,
          chunks: 'initial',  //从入口开始提取代码
          minSize:0, //共用字节大于0即抽离
          minChunks:2 //引用2次就打包
        }
      }
    }
}

模块热更新

全局更新

可以使用module.exports里watch``watchOptions属性进行配置

// 保存后自动打包
  watch: true,
  watchOptions: {
      poll: 1000, // 每1s询问是否更新
      aggregateTimeout: 500, //防抖，输入过程后500ms后进行打包
      ignored: '/node_modules'
  },

局部更新

module.exports里配置属性对象

devServer: {
    //指定被访问html页面所在目录的,即http://localhost:8080/home.html可以访问到。。
    contentBase: path.resolve(__dirname, 'dist'),
    // 热更新
    hot: true
}

引用webpack内置插件

    // 打印更新的模块路径
    new webpack.NamedModulesPlugin(/\.\/locale/,/moment/),
    // 热更新插件
    new webpack.HotModuleReplacementPlugin(),

这么用以后，发现一个很奇怪的问题，抽离公共模块和热更新同时使用，打包不报错，运行devServe不报错，但是js文件不执行了？？为什么呢？