webpack 插件

webpack-dev-server

1、作用

每当修改源代码,自动进行项目的打包和创建

2、安装与配置

安装:输入命令:npm install webpack-dev-server@3.11.2  -D

配置: 修改 package.json --> scripts 中的 dev 命令

webpack 插件_json

 

 3、运行

输入命令: npm run dev

webpack 插件_根目录_02

 

这样就会实现实时修改实时更新了。。。

在cmd中Ctrl+c可以终止服务,如果想重新实现实时打包,需要重新输入命令 npm run  dev

webpack 插件_自动保存_03

 3.如何访问最新的页面

1)运行插件后会出现一个网址

webpack 插件_根目录_04

 

 2)访问之后页面会出现项目中的所有文件夹

webpack 插件_根目录_05

 

 3)运行原理

插件自动保存的打包后的文件,没有保存在物理磁盘上而是保存在内存中,访问根目录下会找到该文件

webpack 插件_根目录_06

 

 4)因此想要查看最新的效果,需要改变引入的js文件

webpack 插件_技术_07

 

 5)重新打开网址中的src文件夹就会出现最新的效果

webpack 插件_实时更新_08