4.使用webpack-dev-server工具实现自动打包编译的功能
使用webpack-dev-server这个工具,来实现自动打包编译的功能
1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
或者运行 cnpm i webpack-dev-server -D 安装
2.安装完毕后,这个工具的用法,和webpack命令的用法,完全一样
打包运行命令:webpack-dev-server,会报错
3.由于,我们是在项目中,本地安装的 webpack-dev-server,所以,无法把它当作脚本命令,在powershell终端中直接运行;(只有那些安装到全局 -g的工具,才能在终端中正常执行)。但是,webpack-dev-server只能本地安装
在package.json 的scripts节点中配置要运行的命令
"scripts":{
"dev":"webpack-dev-server"
}
这时,控制台执行
npm run dev
相当于执行
webpack-dev-server
如果安装包的过程出错,可以删除node_modules,再重新安装
执行以下命令装包
cnpm i
4.注意:webpack-dev-server这个工具,如果想要正常运行,要求,在本地项目中,必须安装webpack
peerDependencies WARNING webpack-dev-server@^3.9.0 requires a peer of webpack@^4.0.0 but none was installed
cnpm i webpack -D
5.webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘上,而是,直接托管到了电脑的内存中,
所以,我们在项目根目录中,根本找不到这个打包好的bundle.js;
6.我们可以认为,webpack-dev-server把打包好的文件,以一种虚拟的形式,托管到了咱们项目的根目录中,虽然我们看不到它,
但是,可以认为,和dist、src、node_modules 平级,有一个看不见的文件,叫做bundle.js