前面我们实现了webpack的操作简化,这里我们彻底脱离操作,实现修改过程中的自动打包,基本实现,package.json配置,webpack.config.js配置
配置前
配置后
https://www.webpackjs.com/concepts/plugins/
一.基本实现
- 安装webpack-dev-server自动打包插件
npm i webpack-dev-server -D - 在pakege.json文件中的scripts脚本中配置
"dev":"webpack-dev-server" - 在项目目录中执行
npm run dev
会找到pakege.json包配置文件中脚本中的dev执行后面的内容 - 如何终止运行
ctrl+C y
注意:1.如果在安装之后无法运行,在此项目中安装webpack(npm i webpack -D) 2.修改路径:../dist/main.js为/main.js
通过webpack-dev-server自动转换得到的main.js并没有真的放在dist文件夹下,由于读写磁盘的操作是非常耗时的,所以为了提升性能,把编译好的文件放在了内存中
二.pakege.json自动打包配置
默认必须打开指定的路径到达项目目录,为了在完成自动打包插件运行后,自动打开指定的文件并且设置指定端口,执行热更新,我们需要手动的对webpack-dev-server自动打包插件进行配置
- 自动打开 --open
- 设置端口号 --port 8090
- 指定默认界面 --contentBase src
- 指定热更新 --hot
热更新:如果没有热更新,修改之后会重新编译整个index.js文件,加上热更新只会编译发生变化的部分,然后追加到已经编译好的main.js中(内存),相当于打补丁(在原有的基础上追加)
image.png
image.png
三.webpack.config.js自动打包配置
由于webpack-dev-server不仅仅是通过npm安装的一个插件,能够通过npm的配置文件运行,它还是基于webpack打包工具的插件,也可以通过webpack配置文件进行配置
- 创建devServer属性并设置
devServer:{
open:true,
port:8090,
contentBase:'src',
hot:true
} - 这里热更新操作需要安装插件
- 导入webpack模块
const webpack=require("webpack"); - 在devServer属性中配置
-
创建热更新插件
plugins:[new webpack.HotModuleReplacementPlugin]
image.png
- 导入webpack模块
