前端必备技能 webpack - 1. webpack简介

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。
 
点这里查看 webpack 系列文章目录
 
博客中的代码位于 码云Git仓库，如有需要可自行前往下载。

前端必备技能 webpack - 1. webpack简介

一、 webpack 是什么？

  webpack 是一个前端资源构建工具，一个静态模块打包器。接下来我们一一分析其中的含义：

1.1 什么是构建工具？

  我们知道一个项目中可能会应用到各种各样的技术，例如使用 sass 来编译 css 文件，js 代码要进行压缩，引用图片的话也要考虑是否需要压缩图片大小等等，每一件事情都需要不同的工具来进行处理。

  这一个个的小工具，在过去需要我们一个一个的进行处理维护，非常麻烦。后来前端提出了一个概念，就是我们来找一个大的工具，在这些小工具的功能都给包含进去，这时候，我们只需要维护这个大工具，就能把这些事情全部做好，而这个大工具，就被我们称为构建工具。

1.2 什么是模块？

  前端的模块规范主要可以分为四种：

• CommonJS
    CommonJS 不适用于浏览器端，所以主要运用于服务端中，而 node.js 的模块系统，就是参照 CommonJS 规范实现的。一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，通过 module.export 导出模块， require 引入模块；
• AMD
    AMD 是 Asynchronous Module Definition 的缩写，是异步模块定义的意思，代表作品是 RequireJS，主要是为了解决 require 是同步加载的问题；
• CMD
    CMD 是 Common Module Definition 的缩写，是通用模块定义的意思，是阿里技术团队制定的，代表作品是 SeaJS，与 requireJS 解决了同样问题，只是运行机制不同；
• ES6
    ES6 中每一个文件就是一个模块，在文件中定义的变量，函数，对象在外部是无法获取的。想要访问需要使用 export 来对其进行输出，在通过 import 来引入；

  模块化概念的引入主要是为了防止变量污染。

1.3 什么是打包？

  比如我们在项目里面使用 SCSS 来编写 CSS，那么我们在代码发布前，需要有一个编译转化的过程，将 SCSS 文件编译成 CSS，并且进行合并压缩等操作。这个过程，就是打包。

二、webpack 基本工作流程

  我们在工作开发中，常常会将 css 等资源通过 link 标签引入到一个 html 页面中，与之类似，使用 webpack 我们则需要将这些资源通过 import 引入到一个 js 文件中，如下所示：

// index.js
// 引入 css 资源
import "./test.less";
// 引入 js 资源
import "./test.js";
// import other resources
// ... ...

  我们在 index.js 中引入了这些资源，我们可以尝试下使用 script 标签将这个文件引入到页面里运行一下，浏览器会抛出下方错误：

Uncaught SyntaxError: Cannot use import statement outside a module

  这是因为浏览器并不支持 ES6 的模块化语法。所有这个时候，我们可以将它交给构建工具 webpack</