webpack的学习(三)：webpack-dev-server实现自动打包编译

使用webpack-dev-server 来实现自动打包编译的功能

1、运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

注意：webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装webpack

2、安装完毕后，运行 webpack-dev-server 会报错

原因： 由于我们是在项目中，本地安装的webpack-dev-server，所以，无法把他当作脚本命令，在终端中运行；（只有那些 安装到 全局 -g 的工具，才能在终端中正常执行）

3、解决运行 webpack-dev-server 报错的办法：在 package.json 中 "scripts" 中加入 "dev": "webpack-dev-server"

4、webpack-dev-server 帮我们打包生成的bundle.js文件，并没有存放到实际的 物理磁盘上；而是直接托管到电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的 bundle.js;

5、运行 npm run dev 即可打包编译项目

 

webpack-dev-server 的常用命令参数

1、打包编译完成在浏览器自动打开 “--open”

2、修改端口  “--port 端口”

3、首页指定页面 “--contentBase 目录”

4、热重载，热更新 “--hot”（没有重新生成一个文件，而是生成补丁局部更新代码，实现浏览器无重载刷新）