webpack是一个前端模块构建工具，它能够将原本一些有依赖关系的文件（源代码）构建成静态资源。
1.webpack安装
$ npm install webpack -g //进行全局安装 $ npm install webpack --save-dev //进行项目本地安装 $ npm install webpack-dev-server --save-dev //安装webpack-dev-server工具
2.基本工作原理
webpack的基本工作原理是，首先要选定一个入口文件，这个入口文件可能要依赖其他的文件模块（如require了一个其他的模块），而那些被依赖的模块可能又要依赖其他模块，这样一层一层的递推。webpack的作用就是从入口文件开始，将存在依赖关系的各个文件构建成一个静态资源。
在一般的项目开发过程中都有构建过程。一个项目可能的基本项目结构为：首先在src目录下存放开发者编写的源代码，node-modules中存放安装的各个模块，而build目录下存放的就是构建好的资源。webpack的工作过程就是将src中的源代码构建成build下的静态资源。
3.基本使用
比如src目录下存在一个app.js入口文件，而这个文件有依赖于test.js文件，要想将这些源代码构建成一个静态资源app.budle.js文件，只需执行下面的命令：
webpack ./app.js app.budle.js
webpack的第一个参数是入口文件的路径，第二个参数是要构建的文件名，默认情况下构建后的文件在当前目录下。
4.使用webpack.config.js
为了不必每次构建都在命令行中输入大量的代码，可以使用webpack.config.js配置文件。这样每次要进行构建时，只需要执行命令webpack，webpack便会自动对当前目录下的webpack.config.js文件进行解析，从而自动完成构建。
一个基本的webpack.config.js的代码及注释如下：
module.exports = {
entry: './src/app.js', //entry字段指定入口文件
output: { //output字段指定构建后的文件
path: './bin', //path字段指定构建后文件的位置
filename: 'app.bundle.js' //filename字段指定构建后的文件名
}
};
使用上面的配置文件和在命令行构建效果相同，但是更加方便。
5.使用loader
webpack只能解析JavaScript代码。但是很多时候项目源代码中不只有javascript代码，还可能有css样式代码、coffeScript等其他代码，这个时候就需要使用loader加载其他语言的转化模块，将其他代码转换成webpack能够使用的javascript代码。
一般的loader命名都是语言名xxx-loader。比如能够将ES6转换成ES5的模块babel，对应的loader名就叫babel-loader。
比如我们要构建的文件中存在.css后缀名的文件，这些文件使用css代码编写的。构建这种项目的时候webpack.config,js文件内容如下：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" } //匹配.css文件，使用对应的loaders
]
}
};
在loaders字段中指定转换，可以指定多个。这里指定了匹配正则表达式/\.css$/的文件及后缀名为.css的文件，使用css-loader和style-loader进行转换。当然使用之前需要先安装这两个loader：npminstallcss-loaderstyle-loader
6.webpack-dev-server
webpack-dev-server是一个小型Express服务器，使用webpack-dev-middlerware构建。开发中可以用它来启动一个服务器，更新代码的时候界面会动态的进行重新渲染。
