摘要：本篇的主要目标是通过实际问题来介绍中容易被人忽略的细节以及源码分析以最新发布的版本的源码为例并且提供几种解决方案。探究原因及源码分析这里以最新发布的版本的源码作为分析。解决方案加参数基于上面简要的分析，我们来尝试下参数的作用。
注：本篇不是入门教程，入门请直接查看官方文档。本篇的主要目标是通过实际问题来介绍 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 code 为 1 且把错误信息打印到 stderr .
2. 使用 webpack-fail-pluginwebpack-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】
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86647.html
摘要：实现不定期更新技巧前端掘金技巧，偶尔更新。统一播放效果实现打字效果动画前端掘金前端开源项目周报前端掘金由出品的前端开源项目周报第四期来啦。 Web 推送技术 - 掘金腾讯云技术社区-掘金主页持续为大家呈现云计算技术文章，欢迎大家关注！ 作者：villainthr 摘自 前端小吉米 伴随着今年 Google I/O 大会的召开，一个很火的概念--Progressive Web Apps ...
摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。同时，将第一个参数以外的其他参数，作为提供给原函数的预设参数，这也是基本的颗粒化基础。 今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：模拟实现ES5中原生bind函数。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研...
摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。同时，将第一个参数以外的其他参数，作为提供给原函数的预设参数，这也是基本的颗粒化基础。 今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：模拟实现ES5中原生bind函数。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研...
摘要：返回的绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。同时，将第一个参数以外的其他参数，作为提供给原函数的预设参数，这也是基本的颗粒化基础。 今天想谈谈一道前端面试题，我做面试官的时候经常喜欢用它来考察面试者的基础是否扎实，以及逻辑、思维能力和临场表现，题目是：模拟实现ES5中原生bind函数。也许这道题目已经不再新鲜，部分读者也会有思路来解答。社区上关于原生bind的研...
摘要：毫无疑问，设计模式于己于他人于系统都是多赢的设计模式使代码编写真正工程化设计模小书前端掘金这是一本关于的小书。 JavaScript 常见设计模式解析 - 掘金设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的；设计...
阅读 459·2021-11-18 13:12
阅读 1088·2021-11-15 11:39
阅读 2327·2021-09-23 11:22
阅读 5787·2021-09-22 15:15
阅读 3438·2021-09-02 09:54
阅读 2199·2019-08-30 11:10
阅读 3113·2019-08-29 14:13
阅读 2801·2019-08-29 12:49
