webpack 基础概念及简单配置
webpack的安装
webpack 运行于 node 环境，node 的安装在这就不赘述了。由于 Light 是基于 webpack2 为大家介绍的，因此 node 的版本尽量要新（文章本就是很基础的东西，想必看文章的人也是刚接触 webpack,粗暴点，直接去装最新版）。至于 webpack 的安装大体上可以分为两种。一是安装在项目目录下，二是全局安装。
项目下安装
来，新建个文件夹，运行命令：
npm install webpack --save-dev静静等待安装完成（要是使用 npm 安装缓慢或者失败，可以使用 npm 镜像 cnpm 代替，具体问度娘）。至此，你的项目下已经可以使用 webpack 了。不信？你命令行里敲个 webpack 试试！
.........敲敲敲.........
what fuck！command not found！
当然了！想直接运行 webpack 命令，你需要将 webpack 添加到系统变量啊。这就是马上要说的 webpack 全局安装了。
全局安装
相同的，运行命令：
npm install webpack -g..........耐心等待........
安装完成后，你的系统变量里就存在 webpack 命令了，你可以运行下试试。
.........敲敲敲.........
what fuck again！又是错误提示！
No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
四级都过了吧！意思是说你没有配置文件啊！是的，webpack 运行时候，会第一时间去找当前目录下属于它的配置文件，我们要是啥都不给它，它也不懂怎么输出文件啊。
最最最简单的配置
不跟你客套了，直接上代码：
var path = require('path');
module.exports = {
entry: {
index:'./src/index.js',
},
output: {
//path 是 nodeJS 的一个基础模块，这里用来获取绝对路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}对了，配置信息请写在项目目录下的 webpack.config.js 文件里，这是 webpack 默认状态下使用的配置文件。
好了，看代码，顾名思义， entry 选项的意思就是入口文件！作用就是告诉 webpack ，我这整个项目就是从这个 index.js 文件开始的，你也从这个文件进来看我都写了什么高大上的代码。大家都知道， webpack 是用来打包的，那既然有 entry 入口，便也有 output 出口了。以上关于 output 的配置是告诉 webpack，把打包好的文件放在 当前目录下的 dist 文件夹里，而且文件名叫做 bundle.js 。
此时你去命令行里敲下 webpack ，是不是发现项目目录下多了一个 dist 文件夹？是的话，那么恭喜你，你已经成功得使用 webpack 打包了你的项目。
到此，你应该已经大致理解了 webpack 的运行方式，它通过配置读取了入口文件，然后根据入口文件的代码，调用你项目中运用到的依赖模块，并最终将所有的模块打包并输出出来。简单的原理理解就是这样，可是这还是皮毛啊，你要不是看 Light 的文章，去看别人的教程，或者官方文档，我相信这些你三四分钟就掌握了。
webpack 是根据你提供的代码去搞一些事情，也就是说，它只看得懂你写的 js 啊。它并不懂你写的 css、scss、ts...等等非 JS 文件，然而 webpack 很诚恳得把每个文件都作为模块，你要是用到了，它就会帮你去打包，至于对错，它真的不 care 。
那么其他的非 JS 文件，webpack 要怎么去解析呢？接下来就是 webpack 的另一个重要概念：Loaders。
Loaders 加载器
Loader--加载器，既然叫这个名字，能干嘛还不知道么？加载文件时候都要经过它的层层把关，换句话说，它就是帮 webpack 看门的。项目中你可能用到各种各样的模块，各种各样的文件，每一个文件都会经过这个 Loader，而它会根据你提供的配置，根据要加载的文件后缀，调用相关的加载器去加载文件。接下来举一个栗子，如何在你的项目中使用 ES6 。
关注前端发展的同学都知晓，ES6 作为新一代的 js 标准，越来越受到开发者们的关注，也越来越多的人使用 ES6 去开发项目。然而，理想很丰满，浏览器兼容这个现实难题也相当饱满。市场上的浏览器大佬们，并非都完美支持 ES6 ，也就是说你拿 ES6 的代码是交不了差的。可是时代潮流不能被这些大佬给克制住了啊，于是，万能的社区为我们提供了 Babel 这一神器。它可以将 ES6 语法转化为 ES5 ,从而解决我们的后顾之忧，可以大胆得使用 ES6。
关于 ES6 的介绍，推荐大家去看阮一峰老师的ECMAScript 6 入门，对于刚接触的人来说是很有帮助的。
webpack里，如何使用 ES6？答案就是 Loader。
首先安装 babel：
npm install --save-dev babel-loader babel-core babel-preset-es2015接着就是去告诉 webpack ，你有 Loader 的。还是 webpack.config.js 。
var path = require('path');
module.exports = {
entry: {
index:'./src/index.js',
},
output: {
//path 是 nodeJS 的一个基础模块，这里用来获取绝对路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
}通过以上配置，当 webpack 中需要打包 JS 文件时，就会去调用 babel-loader 来进行解析（webpack1 的时候可以写 loader: "babel"，2.0的版本开始，必须写 "babel-loader"）。从而，你用 ES6 语法来写，输出的文件会被转为 ES5。当然，想要正确使用 babel，你还需要对 babel 进行配置。很简单，在项目目录下新建一个 .babelrc 文件，里头写 JSON 格式的配置信息。
{
"presets": ["es2015"]
}除了 JS 文件，其他文件类型，例如 css、scss、jpg、ts、vue......等等，都有相应的 Loader 。需要用的时候就配置相应的加载器即可。前端是个五彩缤纷的世界，生存的王道就是要学会适应变化。下面就简单列举一些常用 Loader。
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
},{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader?limit=2048'
}
]上诉如果有不懂的，欢迎留言。介绍完 Loaders ，接下来介绍 webpack 另外一个重要概念：Plugins
Plugins 插件
plugin的目的其实就是填补 loader 的不足。当然，它也是 webpack 功能可配置化的基础。先看代码：
plugins:[
//代码压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
}
})
]这里我们使用了 webpack 自带的代码压缩插件。可以注意到，由于可以给插件传入参数，因此插件的调用需要用 new 来声明。此时运行 webpack，最终打包出来的代码是压缩好的。Light 能力有限，至于如何自己去写 webpack 插件，在这就不聊了！我也不会啊！
下面是完整的配置文件：
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
index:'./src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders:[{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
},{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader?limit=2048'
},{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
plugins:[
//代码压缩
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
}
})
]
}
