【免费视频教程】webpack原理与实践【1】webpack预备知识

大家好，我是老尚，在学习webpack之前，我先列出4个问题，

<!-- 1、webpack是什么？-->

简单的说，webpack它是用于编译JavaScript的模块。也就是说，

它是一个模块打包工具。

打包工具帮你获得一些准备用于部署的js和css等，把它们转化为适合浏览器的可用的格式。

通过压缩、分享、懒加载等，来提升性能，提高开发效率。

<!-- 2、webpack不是什么？-->

它不是任务执行的工具。意思就是说，任务执行就是自动化的处理一些常见的开发任务。

例如，代码检测，构建，测试，都是一些重复性比较强的事情。

这种任务一般是偏重于上层的问题。

任务执行工具，例如，grunt、gulp。

<!-- 3、为什么要学习webpack？-->

早期，在浏览器里运行js，有二种方式，

1、直接引用js脚本程序；有多少个js，就引用多少个.js文件；

2、直接一个大的.js文件，包含所有的js代码。但是文件大小体积就不可控

后来，

又出现了使用立即执行函数表达式的（IIFE）的方式，

这种方式主要是用来解决大型项目的作用域的问题。

这种作法，有一些工具gulp、grunt，这些工具，都算是任务执行器。

它们更多做的是项目文件的拼接。

而且这类工具，它的优化代码的能力比较弱，

它很难判断某个js方法，是否被重复的引用，或是否未被引用。

再后来，

nodeJs出来了，然后就出现了JavaScript的模块化开发。

主要是引入了 require 机制，允许你在当前文件中加载和使用某个模块。

webpack最出色的功能，它还可以引入任何其它类型的文件，包括非js类型的文件，

可以用来引用应用程序中的所有的非js的内容。

例如，图片、css等，webpack把这些都视为模块，这样每个模块都可以通过相互的引用（依赖）来表明它们之间的关系，就可以避免打包未使用的模块（资源）。

这就是webpack存在的原因，也是我们为什么要学习webpack的原因。

<!-- 4、怎么学webpack？-->

【1】由浅入深，这是一个例子

-安装

-实例

-资源的管理

-输出的管理

-开发环境

-模块热替换

-生产环境

-代码分离

-懒加载

-缓存

-环境变量

-构建性能

-内容安全策略

-管理依赖

-公共路径

-...等

【2】部分、相关的概念

入口、起点、输出、模式、loader、插件、配置、模块、解析、依赖图、模块热替换等。。

【3】、相关的配置

入口和上下文、输出、模块、解析、优化、插件、构建、watch、扩展、性能、统计、loader、plugin，等。。

【4】、相关的API

模块热替换的api、loader的、plugin的相关的api等等，

<!-- loader、plugin的区别 -->

loader在webpack里用于【预处理文件】。

-文件的转换；

-json的转换

-转译

-模板

-模式

-代码检查 、测试

-框架方面的转换

plugin就是增强webpack的功能，让webpack变的更加灵活。