webpack是什么？为什么要使用？
随着时代的发展，web应用有越来越丰富的应用和功能，而我们开发web应用所使用到的js代码和依赖包也越来越多，架构也越来越复杂，比如模块化，TypeScript，scss等css预处理器等等，用到了这些东西往往需要进行额外的处理才能被浏览器识别，为了解决这些问题，webpack工具类就孕育而生。
webpack是模块打包工具，它能分析你的项目结构，找到js模块及他们的依赖，同时还能使用各种loader来解析各种浏览器不能识别的代码，还能通过插件处理我们的代码，然后把我们的项目打包成几个文件。
使用webpack
- webpack可以使用npm安装
npm install webpack -D（-S）
-D是指安装到开发依赖，-S是指安装到生产依赖。
- 配置webpack.js文件
通常我们的项目下如果要使用webpack则需要配置一个webpack.js文件
module.exports = {
entry: __dirname + '/app/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
}
}
entry 和 output 这两个选项分别定义webpack的入口文件和打包出口文件。
devtool: 'eval-source-map'
devtool这个选项主要配置source maps，它能在我们打包时同时生成source maps文件，在开发是往往需要各种调试，而打包后的文件非常不容易找出错误代码，而这些文件就是帮助我们快速定位源文件的错误代码，让我们能轻松的找出错误代码并及时更改。
devServer: {
contentBase: './publice',//本地服务加载的页面，
historyApiFallback: true,//不跳转
inline: true//实时更新
}
devServer 能过帮助我们构建本地服务器，当然在此之前需要安装webpack-dev-server。
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
module这个选项就是配置各种各样的加载器的，像babel的loader，css的loader，vue的loader,less的loader等等，配置好了这些loader就是我们能用这些东西做开发。
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
],
这个选项能配置个种webpack插件，包括代码压缩，css提取，html压缩，js压缩等等，webpack有许多内置插件和第三方插件，提供许多功能让我们能更好的开发项目。
总结
webpack的知识光是这些还是远远不够的，还需要到官网去学习以及在项目中学习使用。
