webpack学习

一.webpack概述与基本操作
1.webpack:
静态资源打包工具，当webpack处理应用程序时，它会递归的·构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有的这些模块打包成一个或者多个bundle。
webpack本身是基于node.js开发的，因此需要提前安装node。
1.1webpack5个核心概念:
1.entry：以哪个文件为入口开始打包，分析构建内部依赖图。
2.output:打包好的资源bundles输出到哪里去，以及如何命名。
3.loader：webpack自身只处理js文件，这个可以让它处理非js文件，比如img，css翻译成js，让webpack能处理。
4.plugins:插件，压缩文件什么的。
5.model:分为生产、开发两种模式，前者是本地运行、调试的环境，后者是上线优化的环境。

2.安装
为了防止版本冲突，建议安装本地项目模块，而不是全局，我们使用yarn来演示安装，除了webpack，还需要安装webpack-cli，这个cli，原意叫做命令提示工具。我们使用命令yarn add webpack webpack-cli -d --save-dev后，文件夹会出现package-lock.json，
我们使用npx webpack指令对项目进行打包部署，npx webpack工作原理就是找到node_modules/.bin/webpack.cmd进行执行，
webpack.config.js文件的用处是在这个文件里面制定自定义打包规则，且里面要用commonjs规范来编写，因为webpack是基于node的，


如果发现less什么的没找到报错，可以看一下webpackconfig文件是否写了less相关规则，其他预处理语言或者非js语言也是同样的道理。

3.dev-server:自动化开发服务器(自动编译、打开看浏览器、刷新浏览器)，特点是，只会在内存中编译打包，不会有任何输出，指令为，npx webpack-dev-server。

4.压缩css
5.语法检查：
eslint 、eslint-loader，注意:只检查源码，第三方的库是不用检查的，设置检查规则，


6.js兼容性处理

二.webpack优化介绍

1.hmr（Hot Module Replacement）
一个模块发生变化，之重新打包这个模块，提升构建速度

下图为，给相关js文件加监听，具体的方式

2.source map
构建后的代码如果发生错误，可以使用它追踪源代码错误，方便修改。
方法；在wwebpack。config文件里加一句:
devtool:’‘source-map’’,重新跑一下，会生成一个build.js.map文件。
3.缓存
提升项目速度，分为
1.babel缓存:在webpack.config里设cacheDirectory:true.
2.文件资源缓存:修改文件名，比如在文件名后设哈希值，

4.tree shaking（树摇）
应用程序的依赖项是树状结构。树中的每个节点都代表了一个依赖项，这些依赖项为应用程序提供了不同的功能。我们通过消除不需要的依赖项来减少树的节点。（去除无用代码），在pack.josn中配置一句代码，前提是要使用ES6语法，并且重启生产环境

5.code split(代码分割)
单入口和多入口

6.js懒加载与预加载
（1）懒加载在需要使用时才加载，比如下图，可以看到原来的页面引入被替换成利用按钮页面引入。

懒加载优点：

1. 不需要将对象的实例化全部写到viewDidLoad中，可以简化代码，增强代码的可读性

2. 对象的实例化在getter方法中，各司其职，降低耦合性

3. 对系统的内存占用率会减少
   . （2）预加载则是提前进行加载，有兼容性问题，妥善使用
   预加载与正常加载的区别，正常加载是并行加载，同一时间加载多个文件，链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。

目前支持两种方式的预加载

preload

当浏览器解析到preload会立即进行资源的请求，需要注意的是使用preload进行预加载时需要指定文件的类型

prefetch

当浏览器解析到prefetch时，不会立即请求资源，会等待浏览器空闲以后再进行资源的请求 7.多进程打包: 回顾: eslint-loader:检查我们的代码语法是否正确 babel-loade:把浏览器不认识的语法，编译成浏览器认识的语法。es6->浏览器原生js。 先执行eslint-loader语法检查，再执行babel-loade。 开启多进程打包，

8.dll:使用dll技术，对某些库（第三方库: jquery、react、vue… .）进行单独打包，或者不打包，每次webpack，vue没必要每次打包。

题外1: src:源文件存放位置；dist:打包后文件存放位置；
题外2:
1.commonjs引入规范（
导出：module.exports={导出的方法名a}
引入：let {导入的方法名a} =require（’./文件地址名称’））
2.es6引入规范（
导入import people from ‘./example.js’
导出export default App）
题外3:
1.less这种预处理器浏览器并不会去解析，我们需要先将其编译成css
题外4:
黄色的线是代表第几行，紫色是第几个字符

--------------------------笔记根据源珠峰前端课以及B站尚硅谷webpack总结------------------------------