了解打包工具——Webpack
一、webpack定义
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
前端的开发往往需要对碎片化的资源进行整合和使用，如果让开发者手动打包的话，费时费力还可能出错，而使用自动打包工具的话可以让开发者更好的将精力放在代码上。对于webpack的定义，我们可以把它简单的理解为类似maven的打包构建工具
有关webpack的更多详情，可以访问官网：https://www.webpackjs.com/
二、下载webpack
npm install webpack -g
npm install webpack-cli -g
下载成功后，可以使用以下命令来看是否下载成功
webpack -v
webpack-cli -v
三、使用webpack进行打包
1. 新建一个空文件夹，新建modules目录
2. 在modules目录下新建Dog.js
// 此处向外暴露一个接口
exports.sayHi = function(){
document.write("wan! wan! wan!")
}
3. modules目录新建main.js ， 用于导入dog.js
var dog = require('./Dog');
dog.sayHi()
我们可以看到，通过require关键字，我们可以实现对Dog.js文件的导入
通过自定义的dog对象，我们可以调用Dog.js中的任一方法
4. 在项目根目录下创建webpack.config.js文件作为webpack的初始化配置文件
module.exports = {
entry : './modules/main',
output: {
filename: './js/bundle.js'
}
}
注意：此处要注意webpack配置文件的命名
如果要手动定义webpack配置文件的话，需满足两个条件：
1. 文件名为webpack.config.js
2. 文件必须是放在根目录下
如果是 v4.0.0 以上版本的 webpack，可以不使用配置文件配置 webpack ，使用官网推荐的使用 ./src/index.js 作为入口点
5. 使用webpack进行打包
用管理员权限打开命令行窗口，进入更目录后使用webpack进行打包
结果如图：
6. 在根目录中创建index.html，引入打包后生成的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
用浏览器打开，我们可以看到，Dog.js的内容可以正常在页面上显示了
后记
看到这里，你对webpack有没有更加深入的了解呢？
我们通过import、exports等关键字，将我们的js函数对外暴露和引入，实现函数的复用，再通过webpack进行打包（因为main.js引入了Dog.js，所以打包的时候也会讲Dog.js打包进去），将所有的js文件和函数并为一个文件最后来使用，可以有效实现模块话开发，我们的开发也变得更加简单和规范。
