webpack

一、概念

1.webpack是一个前端打包工具
用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
（1）Vue 前期脚手架就是用webpack制作（Vue 开始推荐vite构建工具（更快））
（2）react脚手架
（3）angular等现代框架脚手架都是依赖webpack

二、安装webpack

在根文件夹下初始化 即npm init -y
然后安装npm i webpack webpack-cli -D

三. webpack的核心概念

1.entry 入口 入口就是项目运行的起点 告诉webpack从哪开始打包
2.output 出口 出口就是打包好放入哪 filename 文件名 path路径
3.mode 模式 产品模式production 开发模式development
4.loader 加载器 webpack默认只能加载处理js文件 loader让webpack拥有处理其他文件的能力
5.plugin 插件 在webpack运行生命周期过程中做一些其他任务（压缩 清理）

四、webpack配置

新建配置文件webpack.config.js,
将mode设置为产品模式production
对应着上面几个模块的意思参考。文件每个参数可以去官网里找

// module 模块 exports 导出 entry output输出 filename文件名，path路径 dirname当前目录 dist目标
// mode模式 development开发模式 production产品 rule规程 test测试 use使用 plugins插件 template模板
// dev开发 Server服务器 prot端口号 hot热更新 host域名 open打开 proxy代理

五. loader加载器

css处理
(1)安装npm i css-loader style-loader -D
(2)作用：css-loader 处理.css文件 style-loader 把css加载到style标签内
在起始页面的js中运用

处理文件（图片，文件）
(1)安装：npm i file-loader url-loader -D
(2)作用：加载图片与文件

 {
   test: