webpack为何物！
简单点说：webpack只是一个打包工具，顺应时代产生的（如今还有一个也很火，叫做rollup），但是webpack具有一些传统打包工具所没有的亮点。
为什么说顺应时代，是因为前端这几年发展太快了。。前端的作用越来越突出，web快发展成webapp，SPA及hybird的大量应用，传统的开发模式及打包工具有相当多的局限。
webpack的构成及亮点
webpack主要由这么几部分组成：
- loaders – webpack的强大之处之一 ，sass ， vue ，react 什么都需要借助专用的加载器解析才能正确加载识别
- 代码拆分 – 所有引入的模块最终会给webpack分割成一个个的
chunk - 插件系统 – 代码压缩，第三方库的引入，让其变得灵活强大
亮点
- 可以把所有引入的东东当做模块来使用
- 依赖树管理（代码拆分成块来达到按需加载）
- 可以借助一些loader实现部分
Grunt/Gulp的工作
- SASS
- 图片base64的转化
- es6的转义
- 热加载
- 实时刷新
- css模块化等等…
- 适应大型项目
缺点
- 引入的东西越多，不仅打包出来的文件越大，而且编译很慢
- 这样的弊端就注定首次加载非常慢，所以有各种各样的优化出来，压缩，分割chunk,DLL等。。。
- 配置文件是个天坑，微微一动错很坑爹
该不该引入webpack
我说说个人的观点额 ， 觉得还是看业务需求吧。有些很简单的东西不一定要引入webpack，这样反倒会影响整个项目，打乱整个项目；有人说现在还用什么seajs,requirejs；听听就好额，CMD,AMD模式用的好，开发也很高效，维护也不麻烦。。
也有人说seajs和requirejs 只能单纯的模块化，不能打包。。。那么结合gulp就能基本满足业务开发需求了 …. 其他牢骚就不说了，见仁见智，萝卜青菜各有所爱。
webpack的最基础的入门
安装
// 全局安装 npm install webpack -g // 进入项目，安装到项目依赖中 npm init npm install webpack --save-dev
webpack有控制台命令操作模式及读取配置文件模式 — 一般推荐后者
最常用的命令
- webpack — 一般编译，启动执行
- webpack -w — 实时编译 ，w(watch)
- webpack -p — 打包（会对 css 和 js 进行压缩）
- webpack --colors: 带颜色输出终端信息
配置文件的模式，是在项目根目录下初始化包含一个webpack.config.js的文件，和gulp和grunt是一个道理的。
配置文件模式可以进行更为详尽的配置和合理的构建整个项目。
webpack.config.js – Hello world版本
var path = require('path'); //引入模块 module.exports = { entry: "./entry.js", //入口文件 output: { //输出文件 path: __dirname + "/dist", filename: "bundle.js" }, module: { //模块的引入，借助各种加载器引入需要解析的 loaders: [ { test: /\.css$/, loader: "style!css" } ] } };
配置文件的术语解释
| 词汇 | 解释 |
|---|---|
| require | commonjs引入模块的写法 |
| module.export | commonjs 导出模块的写法 |
| entry | 入口文件 |
| output | 打包输出的文件路径及路径 , path是路径，filename是输出名【支持hash这些】 |
| loaders | 这个是加载器区域 , 内部的对象是各种各样的加载器 |
| test | 加载器内匹配，支持字符串及正则 |
| loader | 加载器，自右向左依次执行匹配各种相关加载器 |
| include | 加载器内必须处理的文件（文件夹）（可选） |
| exclude | 加载器内屏蔽不需要处理的文件（文件夹）（可选） |
| query | 为loaders提供额外的设置选项（可选) |
这里就解释到这么多，其他一些术语等写到了再解释
总结
作为第一篇介绍帖子，并不想写太长。。循循渐进~~~
webpack很强大，也很坑。。。快速迭代的时代，webpack能挺多久也不知道，rollup国外已经火起来了。。过多两年有更加前卫和新颖的开发框架及工具也很正常,前端就是一条不归路，一路黑到底吧
