5-webpack自动打包
【5-webpack自动打包】前面我们实现了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文件夹下,由于读写磁盘的操作是非常耗时的,所以为了提升性能,把编译好的文件放在了内存中
默认必须打开指定的路径到达项目目录,为了在完成自动打包插件运行后,自动打开指定的文件并且设置指定端口,执行热更新,我们需要手动的对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模块
推荐阅读
- python学习之|python学习之 实现QQ自动发送消息
- 使用composer自动加载类文件
- Beego打包部署到Linux
- 人脸识别|【人脸识别系列】| 实现自动化妆
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- win7删除新建不自动刷新
- 浅析(成人情趣用品智能无人自动售货机是新零售的下一个风口吗())
- Java代码辅助效率工具Lombok(注解|Java代码辅助效率工具Lombok(注解,自动生成代码)
- jar|springboot项目打成jar包和war包,并部署(快速打包部署)
- Android|Android gradle打包涉及task源码解析(五)