1、为什么要有模块化？

在团队开发的前端项目中很难避免的问题之一就是如何避免变量的重名问题，ES5时在前端开发中一般会使用闭包的形式避免变量名称重复。每个作用域范围内的js代码都能称为是一个模块，ES6中依然存在变量名称问题，但是已经得到了更好的解决。

常见的模块化规范:CommonJS、AMD、CMD、ES6中的Modules.但是目前的浏览器只支持ES6模块化规范。

模块化的两个核心思想：导入和导出。

2、ES6中的模块化

如上图，有三个js文件分别是xm.js,xh.js,xm2.js和一个html文件：index.html，此时由于type=module,三个js文件变成了三个独立的模块，此时，三个js文件中的变量和数据都不能互相访问，这肯定不是我们想要的，所以我们需要将三个模块中的变量导出，其他模块在使用时导入对应的模块就可以了，导出用export,导入用import.

2.1 export、import

如上图，这样的话xm2.js文件就能使用xm.js文件中的变量了。还能在定义变量的同时导出：

export let name = '小明'
export let age=12
export let flag = true
export function sum(num1,num2){
    return num1+num2
}

3、webpack

3.1 认识webpack

有些文件，例如.sass、.cjs文件是浏览器不支持的，因此需要将这些文件转换成浏览器支持的文件如.js、.css文件等。这个转换的工具就是webpack。使用webpack工具进行底层支持我们可以使用前面提到的CommonJS、AMD、CMD等前端模块化规范，也就是说在开发中可以写这些规范的代码，但是经过webpack打包后浏览器可以识别并处理这些代码。除此之外webpack还能帮助我们处理模块之间的依赖，减少频繁的导入和导出操作。当然webpack除了模块化开发管理还具有文件压缩合并、预处理等很多功能，但是最主要的是它的模块化开发管理功能。

3.2 webpack安装

要想让webpack干活就需要为它提供能干活的环境，就像Java中的JDK和JRE，webpack依赖的环境是node环境，node环境也是依赖很多包的，通常我们在安装node环境的时候会自动安装一个叫npm（node packages manager）的工具，这个工具的作用仅仅是帮助我们管理node环境中的各种包而已。

下载地址：下载 | Node.js 中文网 (nodejs.cn)

下载完成后在命令黑窗中输入 node -v 查看是否安装成功，安装成功的话显示node版本.

下载完node之后在小黑框中输入：npm install webpack@3.6.0 -g  点击回车安装webpack,安装结束后输入webpack -v 如果能显示当前的webpack版本则表示当前的webpack安装成功了！

完成上述安装后就能使用webpack对我们的项目进行打包了。

3.3 webpack的起步

3.3.1 使用webpack管理项目的基本流程。

在以后的项目中我们将源码放在src目录中，项目打包后的文件放到dist文件夹中，到时候只将dist文件夹发布到服务器上面就行了。也就是下图所示：

首先是js文件的导出和导入，这里使用CommonJS模块化规范进行导入和导出：

那问题来了，该如何打包呢？需要在终端中执行以下命令：

cd v2-webpack的使用：该命令表示进入到v2-webpack的使用文件夹。

webpack ./src/main.js ./dist/bundle.js：表示将当前项目下的main.js文件使用webpd打包到当前项目下的dist文件中的bundle.js文件。

回车后便能看到bundle.js文件的生成过程，在dist文件中可见该文件已生成：

然后便可在index.html文件中使用bundle.js文件了：

代码运行结果：

上述流程就是前端项目编写、打包的基本过程了但是除了上述基本流程之外还涉及到很多的细节以及优化策略。需要注意的是index.html文件是放到项目根路径下的而不是放在src文件下。

3.3.2 webpack.config.js文件和package.json文件的使用

在（1）中我们通过在终端使用webpack ./src/main.js ./dist/bundle.js命令将js文件打包，但是这么写比较繁琐，因此我们希望使用webpack命令就能实现打包，这样的话就需要在某个地方告诉webpack我要将什么文件打包到哪里， 所以我们需要在配置文件(webpack.config.js)中配置相关信息告诉webpack文件的打包方式。配置如下：

/*在node包中导入path包*/
const path = require('path')
module.exports=  {
    /*入口，就是main.js*/
    entry:'./src/main.js',
    output:{
        /*路径,__dirname保存的就是当前文件webpack.config.js所在的路径,'dist'表示会在当前路径上拼接dist*/
        path:path.resolve(__dirname,'dist'),
        /*文件名*/
        filename:'bundle.js'
    },
    /*出口*/
}

这里使用了path这个包，这个包是npm管理的，因此需要在webpack中使用npm加载初始化包，建议在刚开始搭建项目时就将node相关的包加载好：

执行完上述指令后会生成个json文件，叫package.json

该文件中其实是关于我们项目的一些i信息，该文件是node依赖的门口，也就是说我们只要使用webpack管理项目就要使用npm init 指令加载一些包，然后生成package.json文件。配置完webpack.config.js文件之后在终端只需要使用webpack指令就能将main.js文件打包到dist文件中。

综上：我们其实就主要干了一件事就是使用webpack指令将main.js(入口文件)打包到dist文件中。

当前我们项目依赖webpack是全局的，但是在一些项目中会单独给项目安装一个webpack，如果我们直接在终端使用webpack命令的话

那么会将项目中的所有的配置都将按照全局的webpack打包，那么就很容易出错，所以为了规范化开发，我们需要在当前项目中安装webpack:

安装好项目的webpack后package.json文件和项目都出现了变化：

那现在我们在终端中执行webpack命令的话是不是就是使用的本项目中的webpack呢？不是，只要是在终端 不管是在webstorm这个开发软件还是在小黑窗中使用该命令使用的webpack都是全局的，那我要如何才能使用本项目中的webpack呢？这就需要在package.json中添加webpack命令的映射：

这样的话只需要在webstorm终端输入：npm run build 指令 就能使用本项目中的webpack对项目进行打包。使用这种方式的好处就是，首先npm首先会去本项目中寻找webpack，本项目中没有的话再去全局寻找webpack.