webpack 基本配置

大纲：
1、webpack 是什么，为什么需要webpack
2、模块化
3、webpack的基本配置

webpack是什么

我们先引入一段官网的解释

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

理解一下，那就是 webpack 是一个打包模块化 JavaScript 程序的工具。webpack 处理应用程序时，会从配置的入口文件开始，识别出模块化导入语句，然后递归找出入口文件的所有模块依赖，将这些依赖统统打包进一个或多个独立文件中（即bundle文件）。

为什么需要模块化打包工具

那么我们为什么要使用它，模块化究竟有什么好处呢？试想一下，在没有模块化之前，代码是怎么样的呢？

• 变量和方法容易造成全局污染，不容易维护
• 通过script标签从上自下加载资源
• 大型项目资源难以维护，多人协作容易造成混乱

我们都知道，在HTML中，可以通过script标签引入js资源。script标签自上而下的加载执行，当然，如果设置了defer 和 async 属性的话，那就另当别论了。但不难看出，js的执行顺序至关重要，资源加载的先后顺序决定了你的项目是否能够成功运行下去。当项目越来越大，逻辑越来越复杂时，就会让维护变得困难和混乱起来，全局污染的可能性就大的多了。

形成独立作用域

在早期，我们通过命名空间的方法，尽量减少全局变量的产生：

// 使用对象字面量的形式形成命名空间
var Lily = {
        name: 'Lily',
        age: 20,
        hello: function() {
            console.log('My name is ' + this.name);
        }
    };

var Tom = {
        name: 'Tom',
        age: 20,
        hello: function() {
            console.log('My name is ' + this.name);
        }
    };

虽然命名空间能够在一定程度上减少全局变量的产生，但它存在另外一个问题。我们很容易就能够对 Lily 和 Tom 的姓名和年龄进行更改，但实际我们只希望暴露 hello 方法，而不希望基础属性被修改。那么我们怎么进行属性私有化呢？

那就是IIFE 立即执行函数，它会形