05-配置文件：服务和热更新

设置webpack-dev-server

要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev来进行下载的。下载好后，需要配置一下devServer。最简单的devServer配置项只有四个。

const path = require("path")
module.exports = {
    // 入口
    entry: "./src/entery.js",
    // 出口
    output: {
        // 打包文件的路径
        path: path.resolve(__dirname, "./dist"),
        // 打包文件的名字,修改 //输出的文件名称 
        //[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
        filename: "entery.js"
    },
    // 模块,例如,解读CSS,图片如何转换,压缩
    module: {},
    // 插件,用于生产模板,和各项功能
    plugins: [],
    // 配置webpack开发服务功能
    devServer: {
        //设置基本目录结构
        contentBase: path.resolve(__dirname, 'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host: 'localhost',
        //服务端压缩是否开启
        compress: true,
        //配置服务端口号
        port: 2019
    }
}

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

注意：这里需要使用npm 来进行安装webpack-dev-server了，命令如下：

npm install webpack-dev-server@3 --save-dev 这是本地开发环境下使用，所以安装使用了–save-dev。配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。 package.json

{
    "name": "webpack_demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^3.12.0",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.0.0"
    }
}

配置好保存后，在终端里输入 npm run server 打开服务器。然后在浏览器地址栏输入 localhost:2019 支持热更新在npm run server 启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。注意：这里只是我们的webpack3.6版本支持，在3.5版本时要支持热更新还需要一些其他的操作。因为已经有了成熟的3.6版本，我就不再介绍低版本的操作方法。还有一种情况。如果你都设置好了，但是不进行热更新，可能是你系统的问题，在Linux和Ma上支持良好，在Windows上有时会出现问题。

05-配置文件：服务和热更新

设置webpack-dev-server​

设置webpack-dev-server