[译]Webpack的奇妙世界

enali 发布于2019-08-21 16:26 / 2221人阅读

摘要：相反，解释背后的原理是什么使他比一个构造器更加强大。仍然是构造器类似这样的工具存在的主要原因之一就是解决依赖问题。是一个模块构造器，就是前文所说的。

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 + "
"
            + "window.onload = function() { 
"
            + " console.log("This is from the loader!"); 
"
            + "}";
    };

这是一个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

GPU云服务器云服务器莫名奇妙 webpack的作用 webpack的cdn linux下编译阿里

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88547.html

Webpack下莫名其妙出现的jQuery与报错，记一次奇妙的Debug旅程

摘要：在过程中，发现的报错是在中两个页面的无刷切换中出现的。看向网址等等网址的前缀是，这个是谷歌浏览器插件的前缀。难不成，这个文件是谷歌浏览器插件的于是看向了中间的那一串神秘字符串。场景重现项目是一个SPA，使用了Vue+Vue-Router+Webpack+jQuery。报错的场景如下：showImg(http://7xk109.com1.z0.glb.clouddn.com/blog...

Scliang 2019-08-19 17:13 评论0 收藏0
从零开始的webpack生活-0x005：DefinePlugin奇妙用处

摘要：注意该插件是简单的字符串替换，所以如果是定义常量最好使用包裹要替换的内容，或者使用转化，否则会变成代码直接插入，比如版本号这样替换的时候就会变成而不会变成导致错误的数据格式。 0x001 概述上一章讲的是js压缩混淆，和这一章没有半毛钱关系，这章讲的是DefinePlugin，一个好像没有用，但其实很好用的一个插件，我很喜欢，嘿嘿嘿！ 0x002 插件介绍说白了，这是一个简单的字符...

The question 2019-08-21 17:28 评论0 收藏0
2017-06-16 前端日报

摘要：前端日报精选渐进式动画解决方案从前端开发看面向未来的敏捷学习法知乎专栏深度剖析现代应用众成翻译译关于你需要知道的一切构建离线优先的应用知乎专栏中文为何默认开启四进程不牺牲内存占用异步一浅出异步事件性能调优之内存篇二知乎专栏之性能 2017-06-16 前端日报精选渐进式动画解决方案从前端开发看面向未来的敏捷学习法 - 知乎专栏深度剖析现代 JavaScript 应用 — SiteP...

_ipo 2019-08-20 17:18 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（上）

摘要：初始项目设置我们将使用包管理器来处理依赖项。使用包管理器可以使您的项目依赖项保持最新状态，并能够获取和安装最新的包。是小型应用的最佳选择之一。翻译：疯狂的技术宅英文标题：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

wizChen 2019-08-21 11:59 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（上）

摘要：初始项目设置我们将使用包管理器来处理依赖项。使用包管理器可以使您的项目依赖项保持最新状态，并能够获取和安装最新的包。是小型应用的最佳选择之一。翻译：疯狂的技术宅英文标题：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

Doyle 2019-07-30 14:29 评论0 收藏0