webpack学习心得
出于对webpack的好奇，决定要去学习门技术，提升自己。
什么是webpack？
webpack是德国开发者开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如js(含jsx)，coffee，样式（含less、sass），图片等都作为模块来使用和处理。因此，webpack当中js可以引用css,css中可以嵌入图片dataUrl。
为什么要用webpack？
webpack是前端一个工具，可以让各种模块进行加载，预处理，再进行打包，它能有gunt或gulp所有基本功能，优点如下：
1.支持commonjs和AMD模块。
2.支持很多模块加载器的调用，可以使模块灵活定制
3.可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能
安装node.js
选择对应版本先下载一个node.js安装包。
下载完成后双击即可。
命令行输入node -v，回车输出nodejs版本号，表示安装成功。
命令行输入npm -v,回车输出npm版本号，表示安装成功(nodejs集成了npm)。
由于npm不稳定，下载速度慢，建议使用淘宝镜像：
`npm install -g cnpm --registry=https://registry.npm.taobao.org`,
命令行输入cnpm -v，回车输出cnpm版本号，表示安装成功。以后安装就使用cnpm命令。
安装webpack
1.命令行输入 `sudo cnpm install webpack -g`回车，全局安装webpack,命令行输入`webpack -v`回车,输出webpack版本号，表示安装成功。(mac系统下需要输入sudo提高权限，否则报错)。
2.cd进入到我们的项目中，我创建的项目为**********/webpack，在这个项目下创建配置项，命令行输入 `cnpm init`,一路回车。
这时我们的项目会多出一个package.json的文件
接下来，在项目下创建webpack的依赖项，命令行输入`cnpm install webpack --save-dev`。
再来看我们的项目多出一个node_modules文件且package.json多出一行文字
到这里，准备工作已经完成，我们可以使用webpack了。
开始webpack之旅
1.小试牛刀
开始之前，我们构建一下项目结构，如图：
main.js作为一个入口文件，用work.js来编写各种行为特效。
main.js中使用require来加载work.js。
在页面中写入一段话。
命令行输入`webpack app/main.js publice/dist/webpack.js`,回车。
意思是将根目录下的app/入口文件main.js生成新的js文件，把新生成的js放到对应路径下，命名为webpack.js
再看我们的项目，多出一个dist文件夹和一个webpack.js文件。
在index.html中引入webpack.js，执行看看效果。
OK,小试牛刀成功。2.webpack之文件路径
上面小试牛刀，我们需要输入文件路径，当我们项目复杂了，写文件路径也很费劲，下面我们来解决这个问题。
- 创建webpack.config.js
在项目根目录下创建一个文件叫webpack.config.js（必须是这个名字）,创建配置项
现在在命令行直接执行webpack就可以了。
webpack之loaders
1.loaders是干什么的？
loaders是webpack中最核心的功能。通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析json文件并把它转换成javascript文件，或者说把下一代的js文件（ES6,ES7）转换为现代浏览器可以识别的js文件。2.loaders配置项
loaders需要单独安装并且需要webpack.config.js下的modules关键字下进行配置，loaders的配置选项包括以下几方面：
1)test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
2)loader:loader的名称（必须）
3)include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
4)query:为loaders提供额外的设置选项（可选）3.如何使用loaders
-
loaders之json-loader使用
命令行输入cnpm install --save-dev json-loader安装json-loader,
在webpack.config.js创建module
OK,配置项已经写完了。
接下来创建json文件，随便写点内容，在工作文件work.js引入
命令行输入`webpack`，运行webpack。
json-loader成功！
-
loaders之css-loader和style-loader
webpack提供两个工具处理样式表，css-loader和style-loader
css-loader使你能够使用类似@import和url(...)的方法实现require()的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。
命令行输入cnpm install --save-dev style-loader css-loader，安装style-loader和css-loader
配置项写法：
module: {loaders: [ { test: '/\.css$/', loader: 'style!css' } ]}
新建一个css文件并在入口文件main.js引入，执行webpack，看下效果
奇怪了，报错，看了半天。
将配置项换种写法
rules:[{
test:/\.css$/,
use: ['style-loader', 'css-loader'],
}]
执行webpack，看下效果
OK,css引进去了。
-
lodaer之postcss-loader，autoprefixer
考虑到兼容性问题，为css添加前缀,我们就使用postcss-loader，autoprefixer。
命令行输入cnpm install --save-dev postcss-loader autoprefixer,
配置项：
在webpack.config.js同级目录下新建postcss.config.js
执行webpack，去浏览器审查元素
前缀添加成功！