Webpack
一、Webpack 介绍
Webpack 是什么? (mianshi)
- 前端模块化打包(构建)工具 【构建：打包】
- WebPack可以看做是模块打包机：它做的事情，是分析你的项目结构，找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言（Scss，less等）以及 新语法，并将其 转换和打包 为合适的格式供浏览器使用。
为什要使用WebPack? (mianshi)
- 浏览器不识别 SASS、Less ==> 需要对Less/SASS 预编译CSS => 供浏览器使用
- 项目中的模块化以及互相之间引用依赖包造成文件分散 ==> 需要把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数
- 打包成了大文件，体积就变大了 ==> 代码压缩
- 部分ES6语法有兼容问题 => ES5 => 浏览器使用
- .........
- 以上这些操作以前都是需要我们手动处理，这是非常繁琐的， 这个时候webpack就可以上场了，以上的这些操作，在webpack里，只要配置好，一下就可以都搞定了
Webpack的基本能力：处理依赖、模块化、打包
- 处理依赖：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块
- 合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，优化代码的体积(压缩代码)
- 各种插件：比如 babel 把 ES6+ 转化为 ES5- 等
**webpack的工作原理 **(mianshi)
- 简单的说就是分析代码，找到“require”、“import”、“define”等关键词，并替换成对应模块的引用。
- 在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体，通过一个给定的主文件 （index.js），webpack将从这个文件开始找到你的项目的所有的依赖文件，使用loaders处理他们，最后打包为一个浏览器可 以识别的js文件。
二、Webpack 四个核心概念
入口(entry)、出口(output)、加载器(loader)、插件(plugins)
- 入口 ： 要打包哪个文件
- 出口 ： 要打包到哪里
- 加载器 ： 加载除了js文件其他文件的功能 【Webpack 默认只加载js文件。】
- 插件 ： 处理加载器完成不了的功能， 使用插件