webpack适用场景及构建项目

webpack引出的背景

在简单的demo中使用npm的依赖包文件，通过ES6中的import是无法直接引入对应的npm中的依赖（目前是不支持的，后续有可能更新后，支持）。
我们知道在node模块中，采用的是CommonJS规范，使用require来引入文件。这里可能有人会问为什么还要使用import来引入对应的npm中的依赖呢？
为了明白这里为何非要使用import，首先需要明白import和require的区别。

ES6 import和CommonJS require的区别

1. 在ES6中模块间的联系并没有使用node中的CommonJS，就连require都没有使用，所以说require在ES6中并不能直接使用，其依旧是node中的一个私有方法。
2. 在使用import的时候，需要将import放在文件的最开始，而且是必须的。而require则不是非要放在文件最开始，相对来说比较灵活。
3. import引入的模块，只有在编译的时候才会使用，而require是在运行时使用，因此import在性能上要好很多。
4. 目前所有的引擎还没有完全实现import的支持，所以在node中必须使用babel支持ES6，将ES6转成ES5，将import转为require。
   长远来看，require是有局限的，因为引擎支持ES6，支持import是迟早的事，所以在代码部署import上是一种趋势。

---

因此使用babel构建项目，将ES6、import转为可以识别的代码，实现babel的编译，引入webpack。

webpack 构建项目

官网下载安装最新版的node环境

搭建项目目录

1. 在项目根目录下执行npm init 生成package.json配置文件
2. 通过npm安装webpack，npm i webpack@3 -D

配置webpack.config.js文件

项目根目录下新建webpack.config.js文件，在webpack.config.js中配置入口文件和输出文件

module.exports = {