关于webpack 以及 webpack配置和常用插件的学习记录 (2)

DevServer:

  devserver会启动一个http服务器用于服务网页请求,接收webpack发出的文件变化的信号。通过websocket协议自动刷新网页,实现实时预览。

安装:
    npm i webpack-dev-server -D

启动:
    webpack-dev-server

  devserver会把webpack构建出来的文件保存在内存中,要访问输出的文件时,必须通过http服务进行访问。通过devserver启动的webpack自动开启监听模式。

  只有entry和依赖的文件才会被webpack添加到监听列表,所以修改index.html不会触发页面刷新。

    办法:raw-loader --->将html作为字符串拉入js中,然后在index.js中require('./index.html'),这时候修改index.html,页面也会刷新了。

  模块热替换:

    devserver还支持一种模块热替换的技术。 不用重载刷新整个页面,只是将更新过的模块替换老的模块,再重新执行一次来实现实时预览。热替换默认是关闭的,

要开启模块热替换,只需要在启动devserver时带上--hot参数。

  支持source map

猜你喜欢

转载自www.cnblogs.com/wjyz/p/10159970.html