里面有不懂的内容参见：webpack 打包
下面操作，按照步骤来
1.安装 webpack-dev-server 到对应项目目录
命令：npm i webpack-dev-server -d
注意：-d 是打包，代表当前目录的意思
2.运行
- 安装完毕后，这个工具的命令用法，和 webpack 一样
- 由于在项目本地安装 webpack-dev-server ，所以无法全局 cmd 中运行（只有那些安装到全局 -g 的工具，才能在 cmd 中直接运行）
- 而且要求本地安装 webpack
解决：
先在 package.json文件 中添加 "dev": "webpack-dev-server"
之后命令符调用：npm run dev
注意：如果报下面错误
则是因为没有局部安装 webpack 的包，对应文件下安装命令：
npm i webpack webpack-cli -s （ 顺带安装webpack-cli比较好 ）
最后运行之后，会发现每次修改 main.js 文件内容，都会自动执行打包
3.运行 webpack-dev-server 解释
浏览器输入：http://localhost:8080/
注意：
-
若是发现点击了 src 效果没变，可以在 index 中文件引入路径变为下面根路径（但是，实际引入路径，还是图片上面注释掉的），这是暂时的，为了方便观察
-
为了迅速 webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际物理磁盘上；而是，直接托管到了电脑的内存中，所以，我们在项目的根目录中，根本找不到这个新打包好的 bundle.js 文件
-
可以认为，webpack-dev-server 帮我们打包的文件，以一种虚拟的形式，托管到了项目的根目录中，虽然看不见，但可以认为，和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js
5.实例化项目文件 html-webpack-plugin
作用：
- 1.自动在内存中根据指定页面生成一个内存的页面
- 2.自动把打包好的 bundle.js 追加到页面中去
1.安装 html-webpack-plugin
命令：npm i html-webpack-plugin -d
2.在 webpack.config.js 文件中设置
头部添加引用插件：
// 导入在内存中生成 HTML 页面的插件
// 只要是插件，都要放到 plugins 节点中去
var htmlWebpackPlugin=require('html-webpack-plugin');
module.exports 中添加节点：
plugins:[
new htmlWebpackPlugin({
// 创建一个在内存中生成 HTML 页面的插件
// 指定 模板页面，将来会根据指定的页面路径，去生成内存中的页面
template:path.join(__dirname,'./src/index.html'),
// 指定生成的页面的名称
filename:'index.html'
})
]
至此，头部的所有引用都不需要了，最后，命令行中重新跑：npm run dev ，查看对于项目页面
html-webpack-plugin 自动生成并引用链接
4.修改 dev-server
实现效果：
- 运行（代码或地址）直接打开项目页面
- 无刷新的页面更新
- 修改端口
法一：修改 package.json 下的 dev（推荐）
修改："dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
- open：代码修改保存完运行，直接打开
http://localhost:8080 - port：修改端口号：8080，为端口号：3000
- contentBase：代码修改保存完运行或是浏览器输入
http://localhost:8080，直接打开http://localhost:8080下的 src文件，展示项目网页 - hot：无需刷新页面，即可看见修改代码保存后的效果；而且只是局部更新打包，减少不必要的打包，速度变快
法二：修改 webpack.config.js 下的 module.exports（有些麻烦）
第一步添加 devServer：
devServer: {
// 这是配置 dev-server 命令参数的第二种形式，相对来说麻烦一些
open: true, // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase: 'src', // 指定托管的根目录
hot: true // 启动热更新的第一步
}
第二步启用热更新：
// 启用热更新的第二步
var webpack = require('webpack');
第三步配置插件的节点：
plugins:[
// 配置插件的节点
// new 一个热更新的模块对象，这是启用热更新的第三步
new webpack.HotModuleReplacementPlugin()
]