webpack详解

前言：
如何配置webpack呢？
webpack概念有哪些呢？
怎么快速理解并使用webpack呢？
我相信看了这篇文章会解决你的问题并有所收获✌✌

一. 什么是webpack

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

二. 安装webpack

执行下图的步骤进行安装：

cd / 进入根目录
md pack 创建pack文件夹
cd pack 进入pack文件夹
npm init -y 初始化项目
npm i webpack webpack-cli -D 安装webpack与脚手架

三. 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配置文件中

1. 新建配置文件webpack.config.js,
2. 可以把mode设置为产品模式production
3. package.json配置serve
4. 就可以用npm run serve 运行
   
   

五. loader加载器

1. css处理
   (1)安装npm i css-loader style-loader -D
   (2)作用：css-loader 处理.css文件 style-loader 把css加载到style标签内

module:{  
 rules:[                                                                                                 		    
	{test:/\.css$/,
	use:["style-loader","css-loader"]}          
       ]        
      }

如下图我们没有安装之前会报错，安装之后会正常，我们在index.css里面写的样式也会在页面正常显示

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

 {test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
   use:[{  loader:"url-loader",                                                       options:{limit:5000,name:'images/[hash].[ext]'}, 
  }]},

没有安装之前，我们文件夹引入的图片会报错

安装之后,我们插入的图片会在页面正常显示，dist文件夹里面会自动更新出我们刚才的图片images。当图片小于5000字节的时候 ，转换为base64 （小图片减少一次http请求）

此外，我们也可以引入字体图标
1.导入与字体图标库font
2.index.js配置字体信息

//创建div
var icon=document.createElement("div");
//设置内容
icon.innerHTML=` <span class="iconfont icon-check-circle"></span><span class="iconfont icon-close-circle"></span>`
//插入div icon
document.body.append(icon)

3.导入图标的css
@import url('font/iconfont.css');
4.npm run build 就可以出现字体图标了，然后dist文件夹也会出现font文件夹

六. plugin插件

1. html模板插件
   (1) 安装npm i html-webpack-plugin -D
   (2) 作用：生成html模板文件，自动把打包好的js插入到模板文件
   (3) 在webpack.confing.js导入
   const HtmlWebpackPlugin=require('html-webpack-plugin')
   (4)

  plugins:[                                                                                             
       new HtmlWebpackPlugin({                                                   
         template:'./public/index.html'  })      
         ],

1.新建一个public文件夹，把index.html移入public，不要script标签里的js （就是一个html文件,里面什么都不用写）
2.安装html插件
3.配置文件里面进行配置
4. 最后npm run serve
5. 发现dist文件夹里面多了index.html ( script标签上多了defer="defer"延迟)

2. 清理dist目录
   (1) 安装npm i clean-webpack-plugin -D
   (2)作用：打包前删除dist目录
   (3)const {CleanWebpackPlugin}=require('clean-webpack-plugin')
   (4) plugins:[new CleanWebpackPlugin()]
   npm run build 运行项目 ，我们没有写清理dist目录时，需要每次运行前，删除dist文件夹，这样很麻烦。于是我们安装了清理dist目录的plugin插件。
   这里为了更直观的看到这个插件起作用了，我们把main.js后面添加了hash，运行npm run build 发现dist目录的main后面多了一长串的值。这样就可以看出清理dist目录起作用了。
   

七. devServe

(1)安装 npm i webpack-dev-serve -D
(2)作用：开启一个本地服务器

open:true 是否自动打开浏览器
host:“localhost” 域名
port:8080 端口号
hot:true 更新（文件保存，网页自动更新）
package.json
script:(“serve”:webpack serve"}
npm run serve 运行项目里

1.安装 npm i webpack-dev-server -D
2.配置serve:webpack serve
2. 运行npm run serve 会自动打开

八. 特殊标识

[hash] 把内容通过hash算法算出来的一串字符
[hash:7] 取hash字符串前7个
[name] 原文件名称
[ext] 文件的后缀名

以上就是今天的全部内容啦，如果对您有用，不要忘了一键三连哦！！！