如果你是作为前端的一员，可能你对webpack 并不陌生。它可以将很多如js,css，图片等打包成模块，正应了一切皆模块。当我们在写ES6的某些新语法是=时，有些浏览器可能不支持，这是我们可以利用webpack 去和babel 去将其转化为现在浏览器识别的代码。但是如果你刚接触webpack, 可能学习起来对一些概念可能不是很理解，去官网看有时候长篇大论的文档让人很蒙圈，网上搜索，出来的结果让人难懂。我今天就来总结一下，webpack 的用法，如果你想更深入的学习，那推荐你去官网看文档。如果只是想了解，基本使用，我这篇文章大概可以满足你。
一、webpack前期工作
1、概念：webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)
2、四个核心！
- 入口(Entry) ：图表的起点被称之为入口起点
- 出口(Output) ：将所有的资源(assets)归拢在一起后，我们还需要告诉 webpack 在哪里打包我们的应用程序
- 加载器(Loader) ：webpack loader 会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中。
插件(Plugins) ：插件(plugins) 最常用于（但不限于）在打包模块的“compilation”和“chunk”生命周期执行操作和自定义功能
概念看不懂，没关系，往下看，当你深入例子时，这些概念自然而然就知道是什么意思了。
3、前期环境
使用webpack 是需要node.js的环境。这里安装node.js 我不做详细介绍，网上搜很多，傻瓜式安装。安装后我们也就可以使用npm了，如果你觉得npm下载的网速慢，你可以使用淘宝提供的淘宝镜像 cnpm 去安装，这里我也不做详细介绍，网上去搜索怎么安装。
新建一个test 文件
二、安装webpack
1、安装webpack
全局安装 npm install webpack -g
你还可以局部安装 npm install --save-dev webpack
如果你安装成功会生成一个 node_modules 文件夹，全局安装会安装在c盘下边，局部安装会安装在你的项目里边。
我这里是局部安装的。
2、在test文件中初始化环境： npm init
这时会提示你，设置一些npm包的基本信息，例如名字，版本，描述等等。这里你可以先不用管它，一直按回车键就行。
这时你的文件夹里应该生成了 package.json 文件（打包发布时的配置文件）。
3、搭建文件目录结构
① 在test 文件中建一个app 文件夹 和 build 文件夹，
② 在test文件中建一个webpack.config.js文件 （必须，文件名必须是该文件名）
③ test文件夹中新建一个index.html 文件 和 app.js 文件
app文件夹：是我们的入口文件夹（即entry 要指定的入口文件夹），也就是我们写代码，写js 的文件夹
build文件夹 ：是我们的出口文件夹（即output 指定的出口文件夹），也就是我们js 编译后要存放的文件夹
webpack.config.js: 是webpack 配置文件，webpack启动时，会先读取它。
基础目录结构如下：
---app
--index.html
--app.js
---build
---node_modules
---package.json
---webpack.config.js
三、配置webpack.config.js 文件
我们这里先做一个简单的例子，让你更明白，我们把app文件夹下的 app.js 编译之后（这么做是因为有些代码编译后才能使用，比如ES6 部分代码编译后让浏览器识别，sass 和less 的文件编译后变成可读的css文件） ，我们app.js 后放到build 文件夹下。这样我们需要简单配置webpack.config.js 文件，配置该文件之前，我们先写点代码。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<h1>APP</h1>
<P id="content"></P>
<script src="../bulid/newApp.js"></script>
</body>
</html>app.js:
document.getElementById("content").innerHTML = "我是第一个页面";好了，我们来配置webpack.config.js 文件
var path = require('path'); // node 全局path API,写上就行，不要太过于关系
module.exports = {
entry:'./app/app.js',// 入口文件
output:{ // 出口文件
path:path.join(__dirname, 'bulid'), //编译后文件的保存地址，这里是相对路径,记住写法
filename: 'newApp.js' // 编译后，生成的文件名字
}
};这是最基础的配置。
接下来我们启动wepack:
① 如果你是全局安装的 直接 在命令行输入 webpack
② 如果你是局部安装的 你可以打开 package.json 文件自己配置一下 命令
例如：
将红色框中的代码修改为 “start“：“webpack” 意思是启动webpack时可以以start 命令代替。
执行： npm start
结果：
表示你已经成功了。这时你的build 文件中将会有一个 newApp.js 文件
这时我们打开index.html 页面是时展示的是这样的：
四、多文件编译
多文件编译，我们在向app 文件夹下加入一个apptwo.js 和 index-2.html文件，这时app文件夹中有两个将要编译的js文件了，
index-2.html 中写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<h1>APP</h1>
<P id="contentTwo"></P>
<script src="../bulid/apptwo.js"></script> // index.html页面要引入app.js
</body>
</html>apptwo.js:
document.getElementById("contenTwo").innerHTML = "我是第二个页面";重点内容
webpack.config.js 文件我们这样去配置：
var path = require('path');
module.exports = {
entry:{ //入口文件为多个文件时，用对象写法
app:'./app/app.js',
apptwo:'./app/apptwo.js'
},
output:{
path:path.join(__dirname, 'bulid'),
filename: '[name].js' //因为是多文件所以我们用[name]来为变量起每个文件生成的对应文件名
}
};执行 ： npm start
结果bilud 文件夹下生成app.js 文件和 apptwo.js 文件
app文件夹下的 index.html 和 index-2.html 分别会显示：
重点内容
在html文件中我们引入js 是这样引入的 <script src="../bulid/apptwo.js"></script> 其实由于处在node.js 环境中，我们的路径都是对应的，（相当于在同目录下）我们就可以写成这样 <script src="apptwo.js"></script> 也是能载入js 文件的。
五、自动编译 热加载
webpack 为我们提供了几个命令：
- webpack // 最基本的启动webpack的方法
- webpack -w //提供watch方法；实时进行打包更新
- webpack -p // 对打包后的文件进行压缩
- webpack -d // 提供source map，方便调式代码
当我们修改要编译的代码后我们不希望每次动 启动一遍webpack, 这时我们就用到了 webpack -w 命令，观实时察代码变化。
① 比如我们执行 npm start -w 命令（这里我们的是局部的，自己配置的命名 ，如果你安装的是全局的直接使用 webpack -w， ）
② 我们也可以配置 package.json 文件，将其修改为
修改完成之后 运行 npm start
当我们在修改要编译的js代码后，直接刷新浏览器，代码就会改变。
另外，我们想，如果我们修改完代码后，不用重复启动webpack,同时也不用自己手动刷新浏览器，只要我们一保存，浏览器自动刷新该怎么办。
这时我们就用到了 webpack 的热加载。
首先想要使用热加载，我们要安装 webpack-dev-server
① 安装webpack-dev-server 命令 ： npm install webpack-dev-server
②修改 webpack.config.js 文件
var path = require('path'); // node 全局path API,写上就行，不要太过于关系
module.exports = {
entry:{ //入口文件为多个文件时，用对象写法
app:'./app/app.js',
},
output:{ // 出口文件
path:path.join(__dirname, 'bulid'), //编译后文件的保存地址，这里是相对路径,记住写法
publicPath: '/bulid/', // **主要是增加这一项** 配置编译时的公共路径
filename: '[name].js' // 编译后，生成的文件名字
}
};③ 修改 package.json 文件
④ html 页面也需要改动一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>webpack变化</h1>
<p id="countent"></p>
<script src="../bulid/app.js"></script>
//这一块一定要注意，这里不能写成 app.js 要写成具体路径 ../bulid/app.js 不要实现不了浏览器自动刷新功能
</body>
</html>六、压缩打包文件
上边我们打包后的js文件，会有好多注释，和默认的代码，如图：
我们想要压缩代码，这里有两种方法：
1.配置package.json 文件：
然后在执行 webpack -p 命令。
得到的app.js 文件将是压缩的：
2.配置 webpack.config.js 文件
var path = require('path');
var webpack = require('webpack'); // 增加
module.exports = {
entry:{
app:'./app/app.js',
},
output:{
path:path.join(__dirname, 'bulid'),
publicPath: '/bulid/',
filename: '[name].js'
},
plugins:[ // 添加
new webpack.optimize.UglifyJsPlugin()
]
};然后执行， webpack 就会得到与上述同样的压缩代码。
