注：本文不是入门教程，请直接参考官方文档入门。本文的主要目的是通过实际问题以及源码分析（以最新发布版本1.14.0的源码为例）介绍webpack中容易被忽略的细节，并提供几种解决方案。随着前端技术的飞速发展，工程化、模块化、组件化的思想逐渐成为主流。相应的，需要一整套的工具流来支撑。现在比较流行的前端资源模块化管理和打包工具应该就是Webpack了。什么是网页包？可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。也可以将按需加载的模块的代码分离出来，在真正需要的时候异步加载。通过loader转换，任何形式的资源都可以看做是模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等——引自《Webpack中文指南使用示例》一起来看看按照官方文档中的最小用例，新建一个文件，在这两个文件中写入如下内容：cats.jsvarcats=['dave','henry','martha'];module.exports=cats;app.js（入口点）cats=require('./cats.js');console.log(cats);此时可以使用webpack进行打包：webpack./app。jsapp.bundle.js让我们来看看发生了什么。目录下生成一个打包文件app.bundle.js，这是最基本的打包过程。请教一个问题如何判断是否打包成功？一般方案下面是两种常用的判断任务是否执行成功的方案。通过命令执行后的返回码判断（在shell中使用$?获取）。通常0表示执行成功，非0表示不成功。我们用上面的例子来测试一下：可以看到$?为0，打包文件正常。那我们修改app.js文件的内容，故意写错require引入的模块路径，测试一下：注意：$?箭头处仍然为0，生成的打包文件运行不正确。也就是说，根据返回码的值来判断任务是否执行成功是行不通的！通过标准错误输出，我们也会使用标准错误输出（stderr）来判断任务执行过程中是否有错误输出。还是用上面的例子来演示：根据这个例子可以看出webpack是没有标准错误输出的！所以这个方法是不可行的。探究原因及源码分析这里以最新发布的1.14.0版本的源码作为分析。在lib/Compilation.js中我们可以看到这样一段代码：varerrorAndCallback=functionerrorAndCallback(err){err.dependencies=dependencies;err.origin=模块；module.dependenciesErrors.push(err);_this.errors.push（错误）；如果（保释）{回调（错??误）；}else{回调();}};在源码中我们可以看到这个函数其实被调用了很多，比如：当模块可选的时候，会判断是只是警告还是错误处理，上面的代码不需要很多，重点是bail的值，我们继续查找，可以看到bin/config-optimist.js中有bail参数的解析，是一个boolean值。而且因为没有太多的描述，这个参数往往很容易被忽略。解决方案1.添加bail参数基于上面的简单分析，我们来试试bail参数的功能。还是用上面的例子：我们使用webpack--bailtrueapp.jsapp.bundle.js来测试，可以看到如果使用bail参数并传入true，当遇到错误时，打包过程会退出并返回代码1并将错误消息打印到stderr.2。使用webpack-fail-pluginwebpack-fail-plugin就是为解决这个问题而设计的，出错时会返回1.使用方法也很简单：安装：npminstallwebpack-fail-plugin使用：varfailPlugin=require('webpack-fail-plugin');module.exports={//configplugins:[failPlugin]}3、done插件的具体用法如下：//...plugins:[//...function(){this.plugin("done",function(stats){if(stats.compilation.errors&&stats.compilation.errors.length){console.log(stats.compilation.errors);process.exit(1);}//...});}//...],//...4.使用webpack2但webpack2还处于beta阶段，大家可以期待一下。（webpack2依然使用bail参数）可以通过下方二维码订阅我的文章公众号【MoeLove】
