第四节、配置文件：服务和热更新

作为一个前端工程师，最大的变成需求就是所见即所得的工具，也就是常说的热更新。

说一下，大家在学习的时候可以使用淘宝镜像cnpm来安装相关的依赖包，不然网太差会很慢，淘宝镜像网上搜一下就出来了。

设置webpack-dev-server

要执行webpack-dev-server是要先使用npm  install  webpack-dev-server  --save-dev（看清楚了最后的--save-dev和前边的包名之间是隔开的）来进行下载的。下载好后，需要配置一下devServer。最简单的devServer配置项只有四个。先看一下代码，然后我再作解释。

const path = require('path');

module.exports = {
    //入口文件配置项
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    //出口文件配置项
    output:{
        path:path.resolve(__dirname,'dist'),//打包到路径名称
        filename:'[name].js'//打包到的文件名称
    },
    //模块：例如解读css，图片如何转换，压缩
    module:{},
    //插件，用于生产模板和各项功能
    plugins:[],
    //配置webpak开发服务功能
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),//设置基本目录结构
         host:'localhost',//服务器的IP地址，也可以使用IP也可以使用localhost
        compress:true,//服务器压缩是否开启
         port:8090//设置服务器端口
    }
}

• contentBase：配置服务器基本运行路径，用于找到程序打包地址。
• host：服务运行地址，建议使用本机IP，这里为了讲解方便，所以用了localhost
• compress：服务器压缩选型，一般设置为开启，如果你对服务器压缩感兴趣，可以自行学习。
• prot：服务器运行端口，建议不适用80，很容易被占用，这个地方你可以自行设置。

配置好后，你可以试着在终端cmd中输入webpack-dev-server，如果可以执行成功，但是往往提示下面的错误（或者无法找到内部或外部命令）。

出现上面的错误，我们只需要在package.json里配置一下scripts选项就可以执行了。（下图中scripts选项中的server属性）

{
  "name": "firstwebpackdemo",
  "version": "1.0.0",
  "description": "learning",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server":"webpack-dev-server"
  },
  "author": "gaownag",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

配置好后，在终端里输入npm  run  server打开服务器，这个时候仍然在报错，这里并不是我们的操作有问题，查看了下报错，发现之前在配置webpack.config.js时，多加了一个入口文件，而这里我们项目中并没有这个文件，所以这里我们在src文件夹下新建一个entry2.js文件就好了，然后再浏览器地址栏输入http:/localhost:8090就可以看到结果了。

支持热更新

在npm run server  启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。

注意：这里只是我们的webpack3.6版本支持，在3.5版本时要支持热更新还需要一些其他的操作。因为已经有了成熟的3.6版本，我就不再介绍低版本的操作方法。还有一种情况。如果你都设置好了，但是不进行热更新，可能是你系统的问题，在Linux和Ma上支持良好，在Windows上有时会出现问题。