关于 webpack 你所忽略的细节(附源码分析)

注:本篇不是入门教程,入门请直接查看官方文档。本篇的主要目标是通过实际问题来介绍 webpack 中容易被人忽略的细节, 以及源码分析(以最新发布的 release 版本1.14.0的源码为例), 并且提供几种解决方案。

随着前端技术的火热发展,工程化,模块化和组件化的思想已逐步成为主流,与之相应的,就需要有一整套工具流可以支撑起它。

现在比较热门的前端资源模块化管理和打包工具应该非 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 是未成功。 我们以上面的例子来测试一下:

可以看到 $? 的值为 0 , 且打包后的文件运行正常。

那么我们来修改一下 app.js 文件的内容, 将 require 引入的模块路径故意写错,来测试一下:

注意:箭头处 $? 的值仍然为 0, 且生成的打包后的文件运行出错。

这就说明,根据 return code 的值判断任务是否执行成功, 不可行!

通过标准错误输出

我们也会通过标准错误输出stderr)来判断一个任务执行过程中是否有错误输出。还是使用上面的例子做示范:

根据这个例子,可以看到 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 进行测试

可以看到, 使用 bail 参数并传递 true 进去, 在遇到错误的时候,打包过程将会退出, return code1 且把错误信息打印到 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(TheMoeLove)

原文发表时间:2016-12-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

BugkuCTF 域名解析

2457
来自专栏腾讯移动品质中心TMQ的专栏

如何轻松爬取网页数据?

在实际工作中,难免会遇到从网页爬取数据信息的需求,如:从微软官网上爬取最新发布的系统版本。很明显这是个网页爬虫的工作。本文将根据网站特性进行分类介绍几种使用py...

3.7K2
来自专栏马铖的专栏

npm5 新版功能特性解析及与 yarn 评测对比

前言 前段时间 npm 发布了 5.0 版本,提供了自动记录依赖树,下载使用强校验,重写缓存系统等功能升级和改造,吸引了不少关注。本文将对 npm5 的新功能和...

1.9K7
来自专栏mukekeheart的iOS之旅

Android基础总结(1)

1、Android开发的特点 四大组件:活动(Activity)、服务(Service)、广播接收器(Broadcast Receiver)、内容提供器(Con...

27310
来自专栏小白课代表

《经验之谈》——Chrome浏览器的扩展程序(下载及安装)

一台电脑上可以没有QQ微信,可以没有office,也可以没有安全软件修图软件下载软件等各种软件,但是一定要有的就是浏览器。浏览器是我们与互联网进行交流最重要的渠...

1525
来自专栏闪电gogogo的专栏

Git客户端使用教程

课程地址 《版本控制入门 – 搬进 Github》 笔记参考 《搬进 Github》 Git客户端的使用 Git for windows下载 新建一个仓库tat...

27912
来自专栏Java进阶架构师

闪电侠:2018.3 IntelliJ IDEA 重大更新:支持CPU火焰图,新增酷炫主题

就在上周,JetBrain 公司发布了 Java 集成开发环境 IntelliJ IDEA 最新版本 2018.3Beta,本篇文章,我将根据官方博客以及自己的...

1151
来自专栏维C果糖

Hello World · GitHub 指南

简介 Hello World 项目是计算机编程历史中悠久的传统。在我们学习新知识的时候,她也是一个简单的练习。现在,就让我们一起了解 GitHub 吧! 你将学...

1799
来自专栏非著名程序员

可能是 Android 平台上最快的图片压缩框架

这款图片压缩框架,是 ghnor 作者在 Luban 的算法策略上,丰富了外围的 api,提供更多的可配参数,多线程压缩和不同细粒度的任务控制。 它不仅可以同步...

23210
来自专栏编程

从w命令开始,系统状态命令哪个最强大?哪个你最熟悉?

最快的时间内,通过不同命令对Linux系统状态的把控,也是运维的基本功。今天一起来汇总一下,看看都有哪些。 1 使用w查看系统负载 相信所有的linux管理员最...

2008

扫码关注云+社区