Webpack基本用法学习总结

基本使用

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

核心概念

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

处理样式资源

• webpack本身是不能识别样式资源的，所以我们需要借助Loader来帮助Webpack解析样式资源

步骤：

1. 安装相应的loader
2. 在webpack.config.js中进行配置
3. npx webpack进行打包即可

处理图片资源

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

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

修改图片输出文件目录

• 添加generator属性

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

自动清空上次打包的内容

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

Eslint

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

Babel

• JavaScript编译器
• 主要用于将ES6编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或者其他环境中

处理HTML资源

• Defer的作用：在 HTML 中，

搭建开发服务器

• 自动化：devServer
• 在webpack.config.js中进行配置

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

生产模式

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

提取css文件为单独文件

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

问题：

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

Css压缩

npm install css-minimizer-webpack-plugin --save-dev

HTML压缩

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

小结1

高级

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

SourceMap

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

开发模式

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

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

生产模式

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

module.exports = {mode:"production",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文件。
  • 按需加载：需要哪个文件就加载哪个文件

多入口

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

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

按需加载

1. 可以使用import的动态导入，会将动态导入的文件代码分割（拆分成单独模块），在需要使用的时候自动加载。
2. 返回值是一个promise对象

//动态import
const btn = document.getElementsByClassName("btm");
btn[0].addEventListener("click", () => {import("./count.js").then((res) => {console.log(res.default(1, 6));}).catch((err) => {console.log(err);});
});

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技术实现

总结