关于 webpack 你能够疏忽的细节（附源码剖析）

2019年8月31日 172次阅读 来源: 张晋涛

注：本篇不是入门教程，入门请直接检察官方文档。本篇的重要目的是经由历程实际题目来引见 webpack 中轻易被人疏忽的细节, 以及源码剖析(以最新宣布的 release 版本1.14.0的源码为例), 而且供应几种处理计划。

《关于 webpack 你能够疏忽的细节（附源码剖析）》

跟着前端手艺的炽热生长，工程化，模块化和组件化的头脑已逐渐成为主流，与之响应的，就需要有一整套东西流能够支撑起它。

如今比较热点的前端资本模块化治理和打包东西应当非 Webpack 莫属了。

Webpack 是什么

它能够将很多松懈的模块依据依靠和划定规矩打包成相符临盆环境布置的前端资本。还能够将按需加载的模块举行代码分开，比及实际需要的时刻再异步加载。经由历程 loader 的转换，任何情势的资本都能够视作模块，比方 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
–引自 Webpack 中文指南

运用举例

我们来看一下官方文档中的最小用例，新建并写入以下内容到这两个文件：

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

app.js (Entry Point)

cats = require('./cats.js');
console.log(cats);

这个时刻，就能够运用 webpack 举行打包了：

webpack ./app.js app.bundle.js

我们来看一下发作了什么， 目次下天生了一个打包后的文件 app.bundle.js ，这就是最基本的打包历程。

提出题目

怎样推断打包是不是胜利？

通用计划

下面是我们常常使用的两种推断使命是不是实行胜利的计划

经由历程 return code

经由历程敕令实行后的 return code 来推断（在 shell 中运用 $? 取得）。 而且通常情况下 0 是实行胜利， 非 0 是未胜利。 我们以上面的例子来测试一下：

《关于 webpack 你能够疏忽的细节（附源码剖析）》

能够看到 $? 的值为 0 , 且打包后的文件运转一般。

那末我们来修正一下 app.js 文件的内容， 将 require 引入的模块途径有意写错，来测试一下：

《关于 webpack 你能够疏忽的细节（附源码剖析）》

注重：箭头处 $? 的值依然为 0, 且天生的打包后的文件运转失足。

这就申明，依据 return code 的值推断使命是不是实行胜利， 不可行！

经由历程规范毛病输出

我们也会经由历程规范毛病输出（stderr）来推断一个使命实行历程当中是不是有毛病输出。照样运用上面的例子做树模：

《关于 webpack 你能够疏忽的细节（附源码剖析）》

依据这个例子，能够看到 webpack 并没有规范毛病输出！所以这个要领也不可行。

探讨缘由及源码剖析

这里以最新宣布的 release 版本 1.14.0 的源码作为剖析。 在 lib/Compilation.js 中我们能够看到如许一段代码：

var errorAndCallback = function errorAndCallback(err) {
  err.dependencies = dependencies;
  err.origin = module;
  module.dependenciesErrors.push(err);
  _this.errors.push(err);
  if(bail) {
    callback(err);
  } else {
    callback();
  }
};

在源码中能够看到这个函数实在被挪用的还比较多， 比方：在模块为可选的时刻， 会推断只是抛出正告照样处置惩罚毛病， 而上面这段代码天然也没必要多半， 症结点在于 bail 的值， 而我们继承找， 能够看到在 bin/config-optimist.js 中有对 bail 参数的剖析， 这是一个布尔值。而由于没有太多形貌， 所以这个参数就常常轻易被疏忽。

处理计划

1. 加 bail 参数

基于上面扼要的剖析， 我们来尝试下 bail 参数的作用。 依然运用上面的例子：

我们运用 webpack --bail true app.js app.bundle.js 举行测试

《关于 webpack 你能够疏忽的细节（附源码剖析）》

能够看到， 运用 bail 参数并通报 true 进去， 在碰到毛病的时刻，打包历程将会退出， return code 为 1 且把毛病信息打印到 stderr .

2. 运用 webpack-fail-plugin

webpack-fail-plugin 是专为处理这个题目而生的，它会在毛病发作的时刻 return 1. 运用要领也很简单：

装置：

npm install webpack-fail-plugin

运用：

var failPlugin = require('webpack-fail-plugin');
 
module.exports = {
    //config 
    plugins: [
        failPlugin
    ]
}

3.运用 done plugin

详细用法以下：

// ...
plugins: [ 
  // ... 
  function() { 
    this.plugin("done", function(stats) {
      if (stats.compilation.errors && stats.compilation.errors.length) {
        console.log(stats.compilation.errors); 
        process.exit(1); 
      }
      // ... 
    }); 
  }
// ...
],
// ...

4. 运用 webpack 2

不过 webpack 2 如今还在 beta 阶段，能够期待下。 （webpack 2 也依然是运用 bail 参数）

能够经由历程下面二维码定阅我的文章
民众号【MoeLove】

《关于 webpack 你能够疏忽的细节（附源码剖析）》

    原文作者：张晋涛
    原文地址: https://segmentfault.com/a/1190000007915447
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞