webpack
webpack的作用:
- 能够处理JS文件的相互依赖关系(在一个JS文件中可以导入另一个JS文件)
- 能够处理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热更新只要第一步就可以实现