一、何为webpack
webpack是一个开源的Javascript模块打包工具，其最核心的功能
就是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，
最终合并成一个或者多个JS文件。这个过程称为模块打包。
二、为什么要使用webpack
在ES6之前,Javascript并没有模块的概念，项目中的多个JS文件按照
依赖的关系通过script标签依次引入。然而这样做存在着很多缺点：
-
需要手动维护Javscript文件的加载顺序。页面当中的多个script之间通常存在依赖关系，但是这种依赖关系通常是隐式的，除了添加注释外很难清晰地 指出谁依赖了谁，当页面当中加载的文件过多时就很容易出现问题。
-
每一个script标签都意味着需要向服务器请求一次静态资源，在HTTP 2还没出现的时期，建立连接的成本是很高的，过多的请求会严重拖慢网页的渲染速度。
-
在每个script标签中，顶级作用域即全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会造成全局作用域的污染。
而模块化则解决了上述的所有问题：
-
通过导入和导出语句我们可以清晰的看到模块间的依赖关系；
-
模块可以借助工具来进行打包，在页面中只需要加载合并后的资源文件，减少了网络开销；
-
多个模块之间的作用域是隔离的，彼此不会有命名冲突。
三、webpack的安装
npm init
// webpack 是核心模块,webpack-cli是命令行工具
npm install webpack webpack-cli --save-dev
四、使用webpack打包第一个应用
首先，在工程目录下新建以下几个文件：
index.js:
```
import addContent from './add-content.js'
document.write("My first Webpack app.<br/>")
```
add-content.js:
```
export default function() {
document.write("Hello World");
}
```
index.html:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first Webpack app.</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
```
然后在控制台输入打包命令：
```
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
// entry参数是资源打包的入口，webpack从这里开始进行模块依赖的查找，得到项目中包含
// index.js和add-content.js两个模块，并通过他们来生成最终产物。
// output-filename参数是输出资源名，打包完成后工程中出现一个dist目录，其中包含的bundle.js就是webpack打包的结果
// mode参数值的是打包模式。webpack为开发者提供了development,production,none三种模式，当置于development和production
// 模式，他会自动添加适合于当前模式的一系列配置，减少了人为的工作量。
```
五、使用npm scripts
可以看到，上面的webpack打包命令有些冗长，因此可以在package.json当中添加脚本命令：
"scripts": {
"build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
}
scripts是npm提供的脚本功能，在这里可以直接使用由模块所添加的命令。
这样，在命令行当中输入 npm run build 同样可以达到打包的效果.
六、使用默认目录配置
上面的index.js是放在工程根目录下的，而一般情况下我们会分别设置源码目录和资源输出目录。
工程源代码放在/src中，输出资源放在/dist中。而webpack默认的源码入口就是src/index.js,
因此可以省略entry的配置了。将index.js与add-content.js转移到src目录下,修改package.json:
"scripts": {
"build": "webpack --output-filename=bundle.js --mode=development"
}