【笔记】Webpack - webpack-dev-server虚拟打包

webpack-dev-server

  我们平时编程的习惯是不断保存以防数据意外丢失，但在修改项目时频繁保存会让硬盘频繁读写同一个文件而导致硬盘损坏（蓝屏），webpack-dev-server可以解决这一问题帮助我们保护硬盘，并且项目中有AJAX需求时，webpack-dev-sever可以为我们提供服务器环境。   webpack-dev-server实际上就是webpack development sever的缩写，即webpack开发服务器，是一个工具。
  webpack-dev-server的作用：
  ① 虚拟打包，不实质上生成dist文件夹，不实质上生成bundle.js文件；
  ② 为调试AJAX提供服务器环境。

  安装webpack-devsever:

指令：npm(cnpm) install -g ewbpack-dev-server

webpack-dev-server的使用

  使用webpack-dev-server时项目的package.json文件webpack.config.js文件都需要改写，html引包的方式和项目启动的命令也要发生改变。 写好的项目还具有热更新功能。

项目启动命令：npm(cnpm) run dev

  package.json改写前：

  package.json改写后：

  改写webpack.config.js：

  html引包：

  启动项目：