01-webpack介绍-改造

Webpack

• webpack官网
• webpack中文网

一 : Webpack 介绍

Webpack 是什么?? (面试)

• 前端模块化打包(构建)工具
• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言（Scss，less等）以及新语法，并将其转换和打包为合适的格式供浏览器使用。

为什要使用WebPack?? (面试)

• 浏览器不识别 SASS、Less ==> 需要对Less/SASS 预编译CSS => 供浏览器使用
• 项目中的模块化以及互相之间引用依赖包造成文件分散 ==> 需要把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数
• 打包成了大文件,体积就变大了 ==> 代码压缩
• 部分ES6语法有兼容问题 => ES5 => 浏览器使用
• …
• 以上这些操作以前都是需要我们手动处理,这是非常繁琐的, 这个时候webpack就可以上场了,以上的这些操作,
• 在webpack里,只要配置好,一下就可以都搞到了

Webpack的基本能力：处理依赖、模块化、打包

• 处理依赖：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块
• 合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，优化代码的体积(压缩代码)
• 各种插件：babel 把 ES6+ 转化为 ES5- 等

**webpack的工作原理 **(面试)

• 简单的说就是分析代码，找到“require”、“import”、“define”等关键词，并替换成对应模块的引用。
• 在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体，通过一个给定的主文件 （index.js），webpack将从这个文件开始找到你的项目的所有的依赖文件，使用loaders处理他们，最后打包为一个浏览器可 以识别的js文件。

二 : Webpack 四个核心概念：

入口(entry)、出口(output)、加载器(loader)、插件(plugins)

• 入口 : 要打包哪个文件
• 出口 : 要打包到哪里
• 加载器 : 加载除了js文件其他文件的功能
• 插件 : 处理加载器完成不了的功能, 使用插件

三 : 学习 手动配置 webpack 的目的

• 为了我们后面使用脚手架做准备,
• 能够完成webpack的基本安装
• 能够了解webpack配置文件的作用
• 能够说出webpack中loader 的作用
• 能够使用webpack处理常见的资源(css/less/图片)
• 能够说出webpack-dev-server的作用以及配置
• 目标 : 能跟着 视频 + 笔记 照着敲完一遍即可