Webpack 1 折腾记 - （1）webpack是什么鬼！

webpack为何物！

简单点说：webpack只是一个打包工具，顺应时代产生的（如今还有一个也很火，叫做rollup），但是webpack具有一些传统打包工具所没有的亮点。

为什么说顺应时代，是因为前端这几年发展太快了。。前端的作用越来越突出，web快发展成webapp，SPA及hybird的大量应用，传统的开发模式及打包工具有相当多的局限。

---

webpack的构成及亮点

webpack主要由这么几部分组成：

1. loaders – webpack的强大之处之一 ，sass ， vue ，react 什么都需要借助专用的加载器解析才能正确加载识别
2. 代码拆分 – 所有引入的模块最终会给webpack分割成一个个的chunk
3. 插件系统 – 代码压缩，第三方库的引入，让其变得灵活强大

亮点

1. 可以把所有引入的东东当做模块来使用
2. 依赖树管理（代码拆分成块来达到按需加载）
3. 可以借助一些loader实现部分Grunt/Gulp的工作
   
   • SASS
   • 图片base64的转化
   • es6的转义
   • 热加载
   • 实时刷新
   • css模块化等等…
4. 适应大型项目

缺点

1. 引入的东西越多，不仅打包出来的文件越大，而且编译很慢
   
   • 这样的弊端就注定首次加载非常慢，所以有各种各样的优化出来，压缩，分割chunk,DLL等。。。
2. 配置文件是个天坑，微微一动错很坑爹

---

该不该引入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国外已经火起来了。。过多两年有更加前卫和新颖的开发框架及工具也很正常,前端就是一条不归路，一路黑到底吧