webpack 开启本地服务器 hot module replace

操作步骤

1、首先安装全局server

npm install webpack-dev-server -g

2、下载局部

npm install webpack-dev-server -D

3、开启服务器

对所有除了配置文件之外的所有的文件进行实施监听 触发页面刷新（全局更新）

webpack-dev-server

4、适当配置

devServer:{
    port: "8090",
    //切换端口号
    contentBase:'dist'
    //默认打开路径
}

5、直接开启浏览器

webpack-dev-server --open --color

--------------------

mock数据

在目录中创建data.json文件

请求到数据的步骤如下

//首先在本地开发环境中单独引用数据
var json = require('数据文件名');
//当json文件置于dist文件下则相当于放在了服务器下 可以利用ajax请求
//引入JQ
import $ from jquery  
//注意npm下载
$.ajax({


})

----------------------------

hot module  replace  热更新 局部刷新

配置如下：

//该插件是webpack自带的  默认对lesscss生效
var webpack = require('webpack');

plugins:[

    new webpack.HotModuleReplacementPlugin();

],
devServer:{

    hot:true
}
//对于js来讲 入口文件中添加如下


if(module.hot) {
    module.hot.accept();
}

热更新原理

使得应用在运行状态下，不重载刷新就能更新、增加、移除模块的机制

用我的话来阐述，就是 在应用程序的开发环境，方便开发人员在不刷新页面的情况下，就能修改代码，并且直观地在页面上看到变化的机制

在进行热更新时 添加一段热更新代码 进入打包之后的代码中 每隔一段时间向 hot--发送请求监测数据是否发生了

改变  变化之后会重新下载代码   重新编译 进行页面处理