webpack 3 零基础入门教程 #1 - 介绍

原文发表于: www.rails365.net

1. webpack 是什么?

先来讲一下 webpack 是什么。

webpack 的官方对它是这样定义的：

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

中文的大概意思是说：

webpack 能够看作是模块打包机：它作的事情是，分析你的项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其转换和打包为合适的格式供浏览器使用。

用大白话能够这样说：

webpack是一个前端模块化方案，更侧重模块打包，咱们能够把开发中的全部资源（图片、js 文件、css 文件等）都当作模块，经过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

若是这样还不明白的话，咱们来讲下来龙去脉。

在当今的社会，做为 web 开发，会愈来愈意识到前端的重要性，随着 HTML5、 CSS3、 ES6 各类技术的发展，前端的开发愈来愈宠大。甚至有些应用就是单页面应用(SPA)，纯 JavaScript 开发，JavaScript 文件的管理也是一个问题。JavaScript 模块化编程，已经成为一个迫切的需求，这就出现了 JavaScript 的模块解决方案，之前是用 requirejs 或 seajs，而如今则是用 webpack。

举个例子，不少人开发了各类优秀的 JavaScript 模块或组件，咱们不想重复发明轮子，而是想直接利用别人的模块，就是相似 require 或 include 这样的机制，把别人的模块引入进来，可是 JavaScript 又没有 类或包 这样的概念，那应该如何作呢？

如何去引入别人的模块？引入以后保证各类依赖关系不出错？这就是 webpack 要解决的问题。

模块化的概念咱们理解了，那如何理解 打包 这个词呢？

其实，模块化的问题解决以后，webpack 就能把各类资源模块打包合并成一个文件输出给浏览器。在打包的过程当中还能对这些资源进行处理，好比压缩减小体积，把 sass 编译成 css, coffee 编译成 js。因此它在某些程度上，跟 grunt/gulp 的功能有些相同。至于与 grunt/gulp 的不一样之处，咱们下面会讲到。

2. 与 grunt/gulp 的区别

grunt/gulp 的定义是 Task Runner。它有点像 ruby 的 Rake或 Thor，若是你不懂 ruby，那 c/cpp语言的 make，这应该总知道吧。它是一种写任务的工具，只是 grunt/gulp 是用 JavaScript 来写 task 而已。

grunt/gulp 强调的是前端开发的工做流程，咱们能够经过配置一系列的 task，定义 task 处理的事务（例如文件压缩合并、雪碧图、启动 server、版本控制等），而后定义执行顺序，来让 grunt/gulp 执行这些 task，从而构建项目的整个前端开发流程。

const gulp = require('gulp');
const babel = require('gulp-babel');

// gulp.src 会指定源文件，而后经过 pipe 函数把内容传给下个处理方法，最后 gulp.dest 是输出处理后的文件内容。
gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);
复制代码

打个比方，若是你的工程模块依赖很简单，不须要把 js 或各类资源打包，只须要简单的合并、压缩，那就不须要 webpack。grunt/gulp 就够用了。反过来，若是你的工程庞大，页面中使用了不少库（SPA很容易出现这种状况），那就能够选择使用 webpack，由于这样既能作到模块化管理，也能作到 grunt/gulp 的一些功能，好比压缩，转化 coffeescript 为 js 等。

gulp 也能和 webpack 结合起来用，gulp 里面有个 webpack-stream 插件。就是让 webpack 专门去作 module dependency 的事情, 生成一个 bundle.js 文件，而后再用 gulp 去作一些其余杂七杂八 minify, uglify 的事情。 后来人们发现 webpack 有个 plugins 的选项， 能够用来进一步处理通过 loader 生成的 bundle.js，因而有人写了对应的插件， 因此 minify/uglify, 生成 hash 的工做也能够转移到 webpack 自己了，挤掉了 gulp 这部分的市场份额。 再后来你们有发现 npm/package.json 里面的 scripts 原来好好用啊，调用任务的时候就直接写一个简单的命令，由于 gulp 也不就是各类插件命令的组合呀，大部分状况下愈来愈不须要 gulp/grunt 之类的了。 因此你如今看到的不少新项目都是package.json 里面 scripts 写了一堆，外部只须要一个 webpack 就够了。（摘自网络 https://segmentfault.com/q/1010000008058766）

最后总结一下：

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。

grunt/gulp 严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。

webpack 更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

3. 与 Browserify 比较

webpack 与其和 grunt/gulp 相比较，还不如跟 Browserify 比较，由于它们二者更相近，不过好像 Browserify 应该被 webpack 代替了吧，我对 Browserify 了解也很少，在此就不细说了。

4. 优点

1. webpack 不只仅能处理 js, 也能处理 css, 也能处理 html，甚至是图片等各类前端资源。

2. 它开发便捷，仅仅使用一个配置文件，就能替代部分 grunt/gulp 的工做，好比打包、压缩混淆、图片转 base64等。

3. 扩展性强，插件机制完善。

5. 为何要学习 webpack

如今最流行的 react、vue、angular 等技术，你要学习和使用它们，不免会碰到 webpack，由于通常都会用 webpack 来构建前端的开发环境，这样，咱们还有什么理由不学习呢？

查看更多文章: www.rails365.net