WebPack 的使用

参考：https://www.jianshu.com/p/39f5321ed6fa

1. 什么是WebPack

webpack是一个前端的模块化打包（构建）的工具

功能：

• 打包(构建)
• 模块化

特点

webpack 将一切繁杂的、重复的、机械的工作自动处理，开发者只需要关注于功能的实现的

2. 打包（构建）

（1）语法转换

​ ES6--->ES5 供浏览器的解析

​ less/sass---->css 供浏览器的解析

​ TS------> ES5 供浏览器的解析

（2）文件压缩和合并

js / html /css 文件压缩，删除所有的注释和空格，变量名简写

js / css 文件合并 ，将多个js文件或则css文件合并成一个js文件或则css文件

（3）提供开发期间的服务器

能够自动打开浏览器，监听文件变化，自动刷新浏览器的

3. 模块化

在webpack中，所有的资源都是模块

webpack 为前端提供了模块化开发环境，有了webpack之后，我们可以像写 NodeJS 代码一样，写前端代码。

​ 引入 js/css/图片 文件：

const Vue = require('vue')
require('./css/index.css')
require('./imgs/a.png')

每个 js 文件都是一个独立的模块，模块之间的作用域是隔离的，需要通过导入和导出 来实现两个模块之间的数据共享

​webpack 能够识别现在前端所有的模块化语法，也就是说：不管你用的 require.js（AMD）、NodeJS（CommonJS）、ES6（import/export） 哪种语法，webpack全都认识，全都可以解析

webpack 不仅实现 JS 的模块化，也实现了 CSS、图片、视频 等所有前端资源，全部都可以使用模块化的方式来处理。

// CSS：
@import './common/base.css';
// CSS:
background-img: url(./imgs/a.png);
// HTML:
<img src="./imgs/a.png" />

注意点：

webpack 自身没有提供新的模块化语法，但是，它能够处理所有的前端模块化语法

4. 使用 WebPack