关于webpack及dev-server

webpack

webpack的作用：

1. 能够处理JS文件的相互依赖关系（在一个JS文件中可以导入另一个JS文件）
2. 能够处理JS的兼容问题，把高级的，或者浏览器不识别的语法等转换为低级的，浏览器可以识别的语法

命令格式为 webpack 需要打包文件的路径 打包好的输出文件的路径
（如果修改自己写的JS，已经打包好的输出文件也要再次修改才起作用）

默认的webpack的配置文件为 webpack.config.js(需要自己手动在根目录中添加)

webpack的配置文件
命令格式为webpack 可以同时修改
webpack.config.js中配置为
这个配置文件其实就是一个JS文件，通过Node.js中的模块操作向外暴露一个配置对象
path:所有输出文件的目标路径;
publicPath:输出解析文件的目录，url 相对于 HTML 页面

const path =require('path')
module.exports ={
  // entry：入口，表示要使用webpack打包哪个文件；
  entry:path.join(_dirname,'./src/main.js');
  output:{//输出文件相关配置
  path:path.join(_dirname,'./dist')//指定打包好的文件，输出到哪个目录中去
  filename:'bundle.js'  //指定输出的文件名称
  }
}

当我们在控制台中直接输入webpack命令执行的时候，webpack做了以下工作：

1.webpack发现我们并没有通过命令的形式，给她指定的入口和出口
2.webpack就会去项目的根目录中查找一个叫“webpack.config.js”的配置文件
3.当找到配置文件后，webpack回去解析执行这个配置文件，当解析并执行完这个配置文件后，就得到了配置文件中导出的配置对象
4.当webpack拿到配置对象后，就拿到了配置对象中的指定的入口和出口，然后进行打包构建

webpack-dev-server （本地安装）相当于node中的supervisor的插件
webpack-dev-server 这个工具来实现自动打包编译的功能
1.运行 npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖
2.安装完毕后，这个工具的用法和webpack命令的用法完全一样
3.我们是在项目中本地安装的这个工具，所以无法把它当做脚本命令，在powershell终端中直接运行；（只有安装到全局的-g 的工具才能在终端中正常执行）
4.webpack-dev-server 这个工具如果想正常运行，必须在本地项目中，安装webpack
5.webpack-dev-server 帮我们打包的文件并没有存放在物理磁盘中，而是存放在了电脑内存中，所以在项目的根目录中，找不到打包好的文件
6.webpack-dev-server 打包好的文件以一种虚拟的形式托管到了项目的根目录中，和src dist 等目录平级，叫做 bundle.js（直接饮用就可以使用 src="./bundle.js"）

解决方法：在webpack.config.js中的scripts的对象中添加"dev":"webpack-dev-server"

命令格式为：npm run dev

如果想在运行服务器之后自动打开浏览器
解决方法：在webpack.config.js中的scripts的对象中添加"dev":"webpack-dev-server"后直接添加 --open
如果想修改服务器的端口
解决方法：在webpack.config.js中的scripts的对象中添加"dev":"webpack-dev-server"后直接添加 --port 3000
如果想设置根路径
解决方法：在webpack.config.js中的scripts的对象中添加"dev":"webpack-dev-server"后直接添加 --contentBase 根路径名称
如果想设置热重载，热更新
解决代码不必要的更新，可以实现浏览器的无刷新。
解决方法：在webpack.config.js中的scripts的对象中添加"dev":"webpack-dev-server"后直接添加 --hot

第二种解决方法
在webpack.config.js 文件中配置

const path =require('path')
const webpack =require('webpack')  //启用热更新的第二步
module.exports ={
  // entry：入口，表示要使用webpack打包哪个文件；
  entry:path.join(_dirname,'./src/main.js');
  output:{//输出文件相关配置
  path:path.join(_dirname,'./dist')//指定打包好的文件，输出到哪个目录中去
  filename:'bundle.js'  //指定输出的文件名称
  }，
  devServer:{
  open:true,//自动打开浏览器
  port:3000,//设置启动时候的运行端口
  contentBase:'src'  //指定托管的根目录
  hot:true   //启用热更新的第一步
  },
//启用热更新的第三步
  plugins:[ //配置插件的节点
   new  webpack.HotModuleReplacementPlugin()  //new 一个热更新的模块对象
]
}

webpack4热更新只要第一步就可以实现