[译]Webpack的奇妙世界

Posted 2021-04-29 樯橹前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[译]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()
  
    
    
      ]
  
    
    
  }