开发者学堂课程【前端自动化构建工具 Webpack： webpack-dev-server 的基本使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8212
webpack-dev-server 的基本使用
目录：
一、修改代码自动打包编译
二、webpack 命令的用法
三、安装 webpack
四、webpack-dev-server 的用处
一、修改代码自动打包编译
项目经常需要改，比如在开发阶段代码需要改
$( 'li :odd' ).css ( 'backgroundcolor' , 'yellow' )
改为$( 'li :odd' ).css ( 'backgroundcolor' , 'cyan' )
下方输入webpack打包刷新界面会变成青色
发现页面太亮了把
$( 'li :odd' ).css ( 'backgroundcolor' , 'cyan' )改为
$( 'li :odd' ).css ( 'backgroundcolor' , 'darkcyan' )保存输入
webpack刷新会发现变色发现颜色太压抑把
$( 'li :odd' ).css ( 'backgroundcolor' , 'darkcyan' )
改为$( 'li :odd' ).css ( 'backgroundcolor' , 'orange' )
下方输入webpack刷新页面会发现颜色变了
会发现项目需要经常修改代码，没修改一次就要刷新一次都是上箭头，回车输入webpack 刷新界面太麻烦了
webpack 满足不了需求，需要装一个新的工具。
使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。
运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
输入代码cnpm i webpack-dev-server -D
都装完 node 执行脚本的时候都用 node 就行了后来发现每次我们修改完代码以后都要手动去执行一下node后来装了一个 nodemon 的工具现在会发现每次都改完代码都要运行一下 weback 的命令
那么应该怎么办，需要装一个 webpack-dev-server 这么一个工具
所以说 node 就相当于 webpack
那 webpack-dev-server 就相当于 nodemon
那 nodemon 会无缝的执行 node 的一些命令
那 webpack-dev-server 也会无缝的执行webpack所有的操作
只需要输入webpck就可以了现在替换成webpack-dev-server
回车会发现报错了在 server 项里面说 webpack-dev-server
名字比较长
而且 webpack-dev-server
不是全局安装是本地安装的，我们只能执行一些全局安装的工具像 web pack 像nodemon 像 node 的这些都是全局安装的但 dev-server 是项目里面安装的不可以直接这么运行
由于，我们是在项目中，本地安装的 webpack-dev-server ，所以，无法把它当作脚本命令，在 powershell 终端中直接运行;(只有那些安装到全局-g 的工具，才能在终端中正常执行)
直接输入命令不行，那可以迂回解决
还记得 package.json 文件吗里面有 scripts 一个接点
可以配置一些我们要运行的命令
"dev" : "webpack-dev-server"
保存npm run dev回车
又报错因为装包有问题
删除掉所有的包重新安装
安装完之后会有一个提示证明包已经安装完毕
会发现有一个黄色警告requires a peer of webpack@r2.2.0|^3.0.0 but none was installed
只要你看到这个警告你都要把提示的包在重新安装一下
注意: webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
必须在本地安装 webpack
运行脚本编译成功
点击端口号打开页面会发现里面的根目录跟项目里面的跟木本一样
点进来会发现有编辑的页面
webpack output 的输出文件正在托管于根路径里
也就是说打包的好的文件想通过 localhost 打开文件需要跟上 bundle.js
复制 localhost:8080/输入bundle.js
打开localhost:8080/bundle.js会发现有文件
打包好的 bundle 访问需要以根路径bundle访问
网站里面要访问 bunble 就是以/bundle访问就可以
按理说我们改变颜色刷新页面就会改变，但是没有改变
因为我们页面的目录 bundle 跟 localhost:8080/bundle.js 不是一个 bundle 所以颜色不会变
这个 bundle 是根路径里面的 bundle
直接以根据了来访问
这个时候改变颜色会发现颜色改变了
不需要刷新预览器就可以直接变颜色
所以 dev-server" 这个工具很好用不需要打包编译自动就打包编译
/根路径里面的 bundle 是哪里来的
webpack-dev-server帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上;而是，直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的 bundle.js;
虽然说放到根路径里面了，但是看不见。
所以我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是，可以认为，和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle .js
二、webpack 命令的用法
安装完毕后，这个工具的用法，和 webpack 命令的用法，完全一样
由于，在项目中，本地安装的 webpack-dev-server，所以，无法把它当作脚本命令，在 powershell 终端中直接运行;(只有那些安装到全局-g 的工具，才能在终端中正常执行)
在json里面执行
"dev" : "webpack-dev-server"进行相应的构建
运行代码npm run dev
如果报错，需要删包
运行代码装 cnpm i 重新装
装包之后提示警告
需要把警告里面的包重新安装
例如：输入代码cnpm i webpack-D 重新安装
三、安装 webpack
注意: webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
使用 webpack 工具，会实时检测代码改变，自动编译。
打包好的文件想通过 localhost 的形式来访问，要以根路径 bundle.js 来访问。
四、webpack-dev-server的用处
webpack-dev-server 打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上;而是，直接托管到了电脑的内存中，所以在项目根目录中，根本找不到这个打包好的 bundle.js;
可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然看不到它，但是，可以认为，和 dist srcnode_modules 平级，有一个看不见的文件，叫做 bundle.js
