webpack 是一个现JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会分析你的项目结构，递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块按照指定的规则打包成一个或多个 bundle，过程中可以通过配置把一些浏览器不能直接运行的拓展语言（scss，typescript等）转换为合适的格式。
webpack处理模块化js
webpack 用于编译 JavaScript 模块。一旦完成安装，你就可以通过 webpack 的 CLI 或 API 与其配合交互。
准备工作
新建demo文件夹，npm init初始化项目， 局部安装webpack。
项目的基本结构
通常会在项目的根目录建立两个文件夹，分别为src文件夹和dist(或build)文件夹
- src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
- dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
使用webpack的基本文件
<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>// src/Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};// src/main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());使用webpack的方式
1.终端中使用
# {extry file}处填写入口文件的路径
# {destination for bundled file}处填写打包文件的存放路径
webpack {entry file} {destination for bundled file}如果webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址
# webpack非全局安装的情况
node_modules/.bin/webpack src/main.js dist/bundle.js命令执行成功后，会在dist目录下出现bundle.js文件，index.html就可以在浏览器中预览结果了。
2.通过配置文件来使用Webpack
根目录下创建webpack.config.js, 配置entry、output，终端中使用时可以不用每次都手动添加。
const path = require('path');
module.exports = {
entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
}
}webpack 或
webpack --config webpack.config.js注：
- “__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
- 文件中path也可以这样写
path: path.resolve(__dirname,'dist'), 注意需要引入‘path’, path.resolve(__dirname,'dist')获取了项目的绝对路径- 非全局需使用
node_modules/.bin/webpack- 如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它，终端命令可以不明确指出，如果命名为其他名字，需要
--config xxx指明希望使用的配置文件。
3.npm 脚本
通常webpack推荐局部安装，因此在命令行中输入命令类似于node_modules/.bin/webpack这样的路径比较麻烦，可以在package.json中对scripts对象进行相关设置即可，设置方法如下
{
...
"scripts": {
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
},
...
}为什么可以直接写webpack，而不需要写路径，详见webpack安装踩坑中关于npm 脚本原理的内容。
运行
npm run start 或
npm start
//除了几个默认的命令，如start等，run不可以省略。webpack的基本使用就完成了……
其他方式处理相互依赖的js
1.使用古老的js引入方式去管理 JavaScript 项目
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="greet.js"></script>
<script src="main.js"></script>
</body>
</html>
// greet.js
function greeter() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};// main.js
document.querySelector("#root").appendChild(greeter());会有一些问题：
- 无法立即体现，脚本的执行依赖于外部扩展库(external library)。
- 如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
- 如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。
2.模块化方式
- CMD规范的seaJS
- AMD规范的requireJS
- browserify
- ES2015 中的 import 和 export 语句已经被标准化（大多数浏览器还无法支持它们）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。