1、前端构建工具Webpack
webpack 是一个模块打包工具。什么意思呢？它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。
1.1安装
新建 learn-webpack 文件夹，进入该文件夹，运行
npm init -y
这个命令会在该文件下初始化一个 package.json 文件。package.json 主要是管理我们的依赖包，有三个地方需要注意：
{
// 这里面可以定义一些脚本后面会讲到
"scripts": {
},
// 表示是生产环境依赖的包，使用：
// npm install -S ... 或者 npm install --save ...
// 安装的包会放到这里，俩种方式是等价的
"dependencies": {
},
// 表示是只在开发环境需要的包，使用：
// npm install -D ... 或者 npm install --save-dev ...
// 安装的包会放到这里，俩种方式是等价的
"devDependencies": {
}
}
接着运行
npm install [email protected] --save-dev
完成后，我们可以看到，package.json 中已经有了相应的配置。因为没有在全局安装，所以，只能这样运行：
node_modules/.bin/webpack
举个栗子
当前路径创建src目录， 在 src下新建 main.js，只要在里面写入下面这句：
alert(‘Hello Webpack!’);
现在在 learn-webpack 目录下运行：
node_modules/.bin/webpack src/main.js dist/bundle.js
这条命令就是将我们写的 js 代码打包到 dist/bundle.js 里面。现在在 learn-webpack 下新建 index.html，写入下面内容：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>hello world</h1>
<script src="./dist/bundle.js"></script>
</body>
</html>
然后打开这个页面，就能看到它执行了我们在里面写的代码:
脚本
如果每次运行上面的打包命令当然是很麻烦的，webpack 提供配置文件简化这个过程。我们看到 package.json 中有一个 scripts 区域：
定义在这个里面个脚本可以用
npm run + name
的方式执行，现在在 scripts 添加下面的内容：
"dev": "node_modules/.bin/webpack src/main.js dist/bundle.js"
现在就可以直接运行
npm run dev
来打包