[译]Webpack的奇妙世界

Webpack是一个JavaScript模块构造器。 这是适合它功能的名称。 可是，我想在本文中展示Webpack的真正功能。

本文将不讲解如何使用Webpack。 相反，解释背后的原理：是什么使他比一个构造器更增强大。

Webpack仍然是构造器

相似webpack这样的工具存在的主要缘由之一就是解决依赖问题。 JavaScript中的模块引发的依赖问题; 特别是Node.js.

Node.js容许您模块化代码。 代码的模块化致使依赖关系的问题。 可能会发生循环依赖，例如，A - > B - > A引用。 Webpack怎么解决这个问题呢？它使用了工具来构建全部引用模块的完整依赖图。 使用此图表，能够进行分析，以帮助您缓解这种依赖图的压力。

Webpack容许你的代码中有多个入口，并将一个将依赖关系图捆绑到一个或多个输出的文件。

Webpack远不止这些

对我而言，使webpack如此特别的是它提供的很大的扩展点。

Loaders

Loaders是我喜欢称之为迷你透明机。 他们载入任何类型的文件 - 例如TypeScript，CoffeeScript，JSON等 - 并产生JavaScript代码，以便之后添加到Webpack正在构建的依赖关系图中。

Loaders的强大之处在于它们数量不少。 Loaders是一个扩展点。 您能够建立本身的加载程序，而且有100个或者更多的第三方加载程序。

例如，有没有一个Loaders使咱们能够采用像C＃这样的静态类型语言，并将其转化为JavaScript？

这就对Loaders有了一些限制。Loaders能够根据文件类型等进行连接，配置，过滤。

Custom Loader Example

如webpack文档所解释的，Loader只是一个导出功能的节点模块。 一个loader与一个导出函数的nodejs模块同样简单：

module.exports = function(src) {
        return src + '\n'
            + 'window.onload = function() { \n'
            + ' console.log("This is from the loader!"); \n'
            + '}';
    };

这是一个Lodader的简单例子。 这个Lodader正在作的是在当前浏览器会话的窗口加载上附加一个函数来写入控制台。

根据这个想法，咱们能够采起任何来源的输入，而且能够插入任何咱们须要的输入。 因此回到咱们前面的例子，咱们能够用C＃做为输入，并建立一个解析器，将它转化为Webpack但愿的本地JavaScript。

一个C＃到JavaScript的转换器是有点牵强，实在点就是根本毫无心义，但我但愿读者能从中体会到webpack比一个普通构造器强大的地方

Plugins

插件容许webpack扩展性比经过文件传文件方式的Loader更强。插件容许你向webpack核心插入更多的功能，例如您能够添加一个用于缩小的插件; 从输出中提取某些文本，如CSS; 使用插件进行压缩，等等。

插件能够经过访问Webpack编译器来工做。 他们能够访问可能发生并可能发生的全部编译步骤，并能够修改这些步骤。 这意味着一个插件能够修改什么文件作为源文件，添加什么文件做为静态资源，等等。

插件的一个小例子以下：

file: './my-custom-plugin.js'

function MyCustomPlugin() {}

MyCustomPlugin.prototype.apply = function(compiler) {
    compiler.plugin('emit', displayCurrentDate);
    compiler.plugin('after-emit', displayCurrentDate)
}

function displayCurrentDate(compilation, callback) {
    console.log(Date());

    callback();
}

module.exports = MyCustomPlugin;

在这个例子中，咱们将两个事件处理程序添加到Webpack编译器中的两个单独的事件钩子中。 其结果是将在emit以前打印日期日志，emit以后打印日期日志

在Webpack配置文件中能够这样子配置：

var MyCustomPlugin = require('my-custom-plugin');

var webpackConfig = {
    ...
    plugins: [
        new MyCustomPlugin()
    ]
}

插件将会在emit和after-emit的时候执行，webpack的编辑钩子函数列表在webpack官网能够找到

插件的重要性就是它也是一个扩展点。 Webpack的设计方式是让用户彻底扩展Webpack的核心。 有不少插件可供选择，不少是第三方。

考虑到这一点，插件能够占用您须要的全部资源，并使用算法进行压缩。 事实上，已经有一个插件为这件事情。

Summary

Webpack是一个模块构造器，就是前文所说的。 它须要您的依赖关系图，并输出浏览器能够读的格式。

可是webpack能作的不止这些

若是咱们能够采用C＃代码，并将其转换成JavaScript？ 若是咱们可使用YAML配置文件，并建立一个刚刚配置的工做程序怎么办？ 若是咱们拍摄图像，并自动将其裁剪和灰度，该怎么办？

我认为，若是您开始将Webpack视为一个转换器，而不只仅是加载器，则能够看到Webpack的真正实力。

感谢您的阅读，但愿这会有所帮助。

关注个人公众号，更多优质文章定时推送

翻译自 The Wonderful World of Webpack