Webpack基本用法学习总结

基本利用

• webpack是一个静态资源打包工具
  
• 他会以一个大概多个文件作为打包的入口，将我们整个项目全部文件编译组合成一个大概多个文件输出出去
  
• 输出的文件就是编译好的文件，就可以在欣赏器中运行了
  
• 我们将webpack输出的文件叫做bundle
  

焦点概念

• entry（入口）：指示Webpack从哪个文件开始打包
  
• output（输出）：指示Webpack打包完的文件输出到哪里去，如何定名等
  
• loader（加载器）：webpack自己只能处置惩罚js、json等资源，其他资源必要借助loader、webpack才气解析
  
• plugins（插件）：扩展webpack的功能
  
• mode（模式）：
  
  
  
  • 开发模式：development
    
  • 生产模式：production
    
  
  
• 开发服务器：devServer
  

处置惩罚样式资源

• webpack自己是不能识别样式资源的，以是我们必要借助Loader来资助Webpack解析样式资源
  

步调：

• 安装相应的loader
  
• 在webpack.config.js中进行设置
  
• npx webpack进行打包即可
  

处置惩罚图片资源

• 将小于10kb的图片转为base64编码格式
  

1. //处理图片资源
2.       {
3.         test: /\.(png|jpg|gif|jpeg|webp)$/,
4.         type: "asset",
5.         parser: {
6.           dataUrlCondition: {
7.             maxSize: 10 * 1024, //小于10kb的图片，会被base64处理
8.           },
9.         },
10.       },

复制代码

修改图片输出文件目次

• 添加generator属性
  

1. //处理图片资源
2.       {
3.         test: /\.(png|jpg|gif|jpeg|webp)$/,
4.         type: "asset",
5.         parser: {
6.           dataUrlCondition: {
7.             maxSize: 10 * 1024, //小于10kb的图片，会被base64处理
8.           },
9.         },
10.         generator: {
11.           //输出图片名称
12.           filename: "static/images/[hash][ext][query]",
13.         },
14.       },

复制代码

主动清空前次打包的内容

• 在output中的clean属性设置为true
  

Eslint

• 可组装的Javascript和JSX查抄工具
  
• 它是用来检测js和jsx语法的工具，可以设置各项功能
  

Babel

• JavaScript编译器
  
• 重要用于将ES6编写的代码转换为向后兼容的JavaScript语法，以便可以或许运行在当前和旧版本的欣赏器大概其他环境中
  

处置惩罚HTML资源

• Defer的作用：在 HTML 中，
  

搭建开发服务器

• 主动化：devServer
  
• 在webpack.config.js中进行设置
  

1.   //开发服务器
2.   devServer:{
3.     host:"localhost", //启动服务器域名
4.     port:"3000", //启动服务器端口
5.     open:true // 是否自动打开浏览器
6.   },

复制代码

生产模式

• 生产模式是开发完成代码后，我们必要得到代码将来摆设上线
  
• 这个模式下我们重要对代码进行优化，让其运行性能更好，优化重要从两个角度出发：
  
  
  
  • 优化代码运行性能
    
  • 优化代码打包速率
    
  
  

提取css文件为单独文件

• css文件现在被打包到js文件中，当js文件加载时，会创建一个style标签来天生样式
  
• 如许对于网站来说会出现闪屏征象，用户体验不好
  
• 我们应该是单独的css文件，通过link标签加载性能更好
  
• 利用下面的插件
  mini-css-extract-plugin
  

标题：

• 为什么通过style标签加载css会出现闪屏征象，但是通过link标签则不会呢
  
• 当您通过
  

Css压缩

npm install css-minimizer-webpack-plugin --save-dev
HTML压缩

• 默认生产模式已经开启了：HTML压缩和js压缩
  

小结1

高级

• 所谓高级设置实在就是进行Webpack优化，让我们代码在编译/运行时性能更好
  

SourceMap

• SourceMap（源代码映射）是一个用来天生源代码与构建子女码逐一映射的文件的方案。
  
• 作用：它会天生一个xxx.map文件，内里包含源代码和构建子女码每一行、每一列的映射关系。当构建子女码堕落了，会通过xxx.map文件，从构建子女码堕落位置找到映射后源代码堕落位置，从而让欣赏器提示源代码文件堕落位置，资助我们更快的找到错误根源
  

开发模式

• cheap-module-source-map
  
• 长处：打包编译速率快，只包含行映射
  
• 缺点：没有列映射
  

1. module.exports = {
2.     mode:"development",
3.     devtool:"cheap-module-source-map"
4. }

复制代码

生产模式

• source-map
  
• 长处：包含行/列映射
  
• 缺点：打包编译速率更慢
  

1. module.exports = {
2.     mode:"production",
3.     devtool:"source-map"

复制代码

HMR

• 全称：HotModuleReplacement（HMR/热模块更换）：在步伐运行中，更换、添加大概删除模块，而无需重新加载整个页面
  

OneOf

• 为什么：打包时每个文件都会颠末全部loader处置惩罚，固然由于test正则缘故原由实际没有处置惩罚上，但是都要过一遍，比力慢
  
• 是什么：顾名思义就是只能匹配上一个loader，剩下的就不匹配了
  

Include/Exclude

• 为什么：开发时我们必要利用第三方库和插件，全部文件都下载到node-modules中了，而这些文件是不必要编译可以直接利用的，以是我们在对js文件处置惩罚时，要扫除node-modules下面的文件
  
• 是什么：
  
  
  
  • include：包含，只处置惩罚xxx文件
    
  • exclude：扫除，除了xxx文件以外其他文件都处置惩罚
    
  
  

Cache

• 为什么：每次打包时js文件都要颠末Eslint查抄和Babel编译，速率比力慢。我们可以缓存之前的Eslint查抄和Babel编译效果，如许第二次打包时速率就会更快了。
  
• 是什么：对Eslint查抄和Babel编译效果进行缓存
  

Thead

• 为什么：当项目越来越大时，打包速率越来越慢。我们想要继承提升打包速率，实在就是要提升js的打包速率，由于其他文件都比力少。而对js文件处置惩罚重要就是eslint、babel、Terser三个工具，以是我们要提升他们的运行速率，我们可以开启多进程同时处置惩罚js文件，如许速率就比之前的单进程打包更快了
  
• 是什么：多进程打包：开启电脑的多个进程同时干一件事，速率更快。
  必要留意：请仅在特殊耗时的操纵中利用，由于每个进程启动就有约莫为600ms左右的开销。
  

Tree Shaking

• 用来淘汰代码体积
  
• 为什么：开发时我们界说了一些工具函数库，大概引用第三方工具函数库大概组件库。假如没有特殊处置惩罚的话我们打包时会引入整个库，但是实际上大概我们大概只用上极小部门的功能。如许将整个库都打包进来，体积就太大了。
  
• 是什么：Tree Shaking是一个术语，通常用于形貌移除Javascript中的没有利用上的代码。
  留意：它依赖ES Module
  生产模式下主动开启了这个功能
  

Babel

• Babel-runtime
  

压缩图片

• 开发假如项目中引用了较多图片，那么图片体积会比力大，将来哀求速率比力慢。我们可以对图片进行压缩，淘汰图片体积。
  留意：假如项目中图片都是在线链接，那么就不必要了，本地项目静态图片才必要进行压缩。
  
• 插件：image-minimizer-webpack-plugin
  

Code Split

• 作用：优化代码运行性能
  
• 为什么：打包代码时会将全部js文件打包到一个文件中，体积太大了。我们假如只要渲染首页，就应该只加载首页的js文件，其他文件不应该加载
  
  
  
  • 以是我们必要将打包天生的文件进行代码分割，天生多个js文件，渲染哪个页面就只加载某个js文件，如许加载的资源越少，速率就更快。
    
  
  
• 是什么：代码分割，重要做了两件事
  
  
  
  • 分割文件：将打包天生的文件进行分割，天生多个js文件。
    
  • 按需加载：必要哪个文件就加载哪个文件
    
  
  

多入口

• 有多个入口文件就是多入口
  
• 打包后会天生多个文件
  

1. entry: {
2.     //有多个入口文件：多入口
3.     main: "./src/main.js",
4.     app: "./src/app.js",
5.   },

复制代码

按需加载

• 可以利用import的动态导入，会将动态导入的文件代码分割（拆分成单独模块），在必要利用的时间主动加载。
  
• 返回值是一个promise对象
  

1. //动态import
2. const btn = document.getElementsByClassName("btm");
3. btn[0].addEventListener("click", () => {
4.   import("./count.js")
5.     .then((res) => {
6.       console.log(res.default(1, 6));
7.     })
8.     .catch((err) => {
9.       console.log(err);
10.     });
11. });

复制代码

Preload / Prefetch

• 为什么：前面已经做了代码分割，同时会利用import动态导入语法来进行代码按需加载（也叫懒加载，比如路由懒加载就是如许实现的）。但是加载速率还不敷好，比如：是用户点击按钮时才加载这个资源的，假如资源体积很大，那么用户会感觉到显着卡顿效果。我们想在欣赏器空闲时间，加载后续必要利用的资源，我们就必要用上preload和prefetch技能。
  
• 是什么：
  
  
  
  • Preload：告诉欣赏器立刻加载资源
    
  • Prefetch：告诉欣赏器在空闲时才开始加载资源
    
  
  
• 共同点：
  
  
  
  • 都只会加载资源，并不执行。
    
  • 都有缓存
    
  
  
• 区别：
  
  
  
  • Preload加载优先级高，Prefetch加载优先级低
    
  • Preload只能加载当前页面必要利用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面必要利用的资源
    
  
  
• 总结：
  
  
  
  • 当前页面优先级高的资源用Preload加载。
    
  • 下一个页面必要利用的资源用Prefetch加载。
    
  
  

Core-js

• 为什么：babel对js代码的兼容性处置惩罚不能做到八面见光，一旦遇到低版本欣赏器会直接报错，以是我们想要将js兼容性标题彻底办理
  
• 是什么：core-js是专门用来做ES6以及以上API的polyfill。polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的欣赏器上，利用该新特性。
  
• 完备引入：import 'core-js'
  
• 按需加载：import "core-js/es/promise"
  

PWA

• 为什么：开发Web App项目，项目一旦处于网络离线环境，就没法访问了。
  
• 是什么：渐进式网络应用步伐（progressive web application），是一种可以提供类似于native app（原生应用步伐）体验的Web App的技能。此中最紧张的是，在离线时应用步伐可以或许继承运行功能。内部通过Service Workers技能实现
  

总结