本节知识点

• 安装一个包叫做webpack-dev-server
• 作用就是起到热更新。这样就实现了所见即所得的效果
• 热更新下面index.html必须要放在配置目录下面否则热更新不了
• 一共四步 装包 修改webpack配置文件 修改package.json文件 敲npm run server

(一) 设置 webpack-dev-server

• 要执行webpack-dev-server 要先安装然后配置一下。

$ npm install webpack-dev-server --save-dev

• 第二部开始配置文件

找到/webpack.config.js 修改里面的选项

  devServer:{
        //设置基本目录结构
        contentBase:path.join(__dirname,"/dist"),
        //服务器的IP地址 也可以使用localhost
        host:"localhost",
        //服务器压缩是否开启
        compress: true,
        //配置服务器端口号
        port: 1717
    }

• contentBase :配置服务器基本运行路径，用于找到程序打包地址

• host :服务器运行地址 建议用本机IP，这里为了方便用了localhost

• compress : 服务器端压缩选型，一般设置开启

• port: 服务端口号 要是用80则很容易被占据。

• [第三步找到/package.json 修改下面为下面的代码]

"scripts":{
  "server" : "webpack-dev-server"
},

• [第四部在控制台输出下面代码]

$ npm run server

这样你每次修改SRC目录下面的js文件则他都会立刻显示出来结果