Webpack 1.0.6

313 阅读1分钟

WebpackDevServer的配置可以极大的提高开发效率,通过对webpack1.0.6之前的操作和配置,查看代码更新和挂载情况都要手动去输入 npm run bundle 来打包代码,这在开发中是很消耗时间的。

webpack - watch

webpack 中有一个watch的参数。

终端输入 npm run watch

watch         // webpack 会自动侦听代码的变化,webpack就会重新打包。浏览器需要手动刷新重新加载渲染页面。

webpack - devServer

终端输入 npm install webpack-dev-server -D     下载webpack-dev-server


contentBase     //开启的服务器文件夹位置。

open                 //开启默认浏览器。

port                 //修改端口号。

proxy              //跨域配置。

devserver 不需要下载,是webpack自带的一个配置项。侦听到代码变化重新打包并且自动刷新页面。可以发送ajax请求,并不是配置了跨域,而是如果不用devserver侦听代码,地址栏是以file文件形式打开文件,而devserver开启的是http://localhost的网路地址的形式开启的页面。

webpack - Module Replacement

当使用devserver时,虽然能够重新打包并自动刷新浏览器。但刷新浏览器会丢失已经处理好的数据,当你改变一个数据时想查看挂载之后的效果,结果发现之前的数据已经变成了初始值,这是我们都不想看到的情况。那么wepack的devserver还有另外一个配置项就是hot,也就是热更新机制。



引入 webpack

devserver:{

root          //开启热更新机制。

hotOnle   //不修改不刷新。

}

new  webpack.HotModuleReplacementPlugin()