Webpack 学习重点笔记整理

Webpack学习记录

第一章 Webpack整体系欸

---

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

#Webpack

###简介：
webpack是一个现代js的应用程序的静态模块打包工具，当webpack处理应用程序时，他会在内部构件一个依赖图，此依赖图会映射项目所需的每一个模块并生成一个或者多个bundle包，webpack本身是基于node.js开发的

###解决了的问题：
当多个JS被加载需要异步条件加载时需要webpack来决定顺序，并且打包成bundle.js文件
###前端模块化：

• 作用域：全局作用域 局部作用域
  当在同一html直接引入js 全局作用域会直接覆盖所有js文件 若不同的js有相同的值会导致值的共用容易引起变量覆盖。

• 命名空间: 采用闭包的方法进行命名空间的保护

• 模块化: 将每一个功能单独打包成一个模块

###主要功能：

• 1.代码转换：ts编译成js；less、scss编译成css；es6、es7编译成es5；虚拟dom编译成真实dom等;
• 2.文件优化：压缩JS、CSS、HTML；压缩合并图片，图片base64等;
  代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码;
• 3.模块合并：在采用模块化的项目里，会有多个模块和文件需要构建功能把模块分类 合 并成一个文件;
• 4.自动刷新：监听本地源代码的变化，自动重新构建，刷新浏览器;(基本上使用react-create-app和Vue.cil 已经实现了这一步)
• 5.代码校验：ESLint代码规范校验，和检查，单元检测(webpack本身不大，但是咱们 要是实现某一些功能，还要往webpack中加一个模块来实现);

###主要组件

• 灵活加载各个组件
• loader: 加载
• plugin: 组件

###重点

• bundle.js
• 异步加载
• Tapuable

#参考
链接：