随着前端的飞速发展，web项目的复杂度也越来越高。为了方便开发，便于优化，将一个复杂的项目拆分成小的模块，于是出现了模块化开发。但是由于缺乏规范管理，出现了很多模块化规范，从nodejs的commonjs规范，到浏览器的CMD、AMD，再到ES6中的标准化前端模块化。前端构建工具虽然前端开发在模块化的过程中蓬勃发展，但存在一个问题：源代码不能直接运行，必须通过构建工具转换后才能正常运行。基于nodejs的常用构建工具有gulp、fis3、webpack。gulpGulp是一个基于流的构建自动化工具。Gulp设计的非常简单，通过以下五种方式可以支持几乎所有的构建场景：1.通过gulp.task注册一个任务；2、通过gulp.run执行任务；3.通过gulp.watch监控文件变化；4.通过gulp.src读取文件：5。通过gulp.dest写入文件。Gulp的优点是易于使用和灵活。它可以单独构建或与其他工具结合使用。它的缺点是集成度不高，写很多配置就可以用，不能开箱即用。fis3Fis3是来自百度的国产构建工具。相对于只提供基本功能的Gulp，Fis3集成了web开发中常用的构建功能，如下所述。1、读写文件：通过fis.match读取文件，释放配置文件的输出路径。2.资源位置：解决文件与文件位置之间的依赖关系。3、文件指纹：在通过useHash配置输出文件时，为文件URL添加md5戳，优化浏览器的缓存。4.文件编译：通过parser配置文件解析器进行文件转换，比如将ES6编译成ES5。5.压缩资源：通过优化器配置代码压缩方式。6、图片合并：通过spriter配置将css中导入的图片合并到一个文件中，减少Hπp请求次数。Fis3的优点是集成了web开发所需的各种构建功能，易于配置，开箱即用。Fis3是一个专注于Web开发的完整解决方案。如果把Gulp比作汽车的引擎，那么Fis3就可以比作一辆完整的汽车。webpackWebpack是一个打包模块化JavaScript的工具。在Webpack中，所有文件都是模块。通过Loader转换文件，通过Plugin注入hooks，最后输出一个由多个模块组成的文件。Webpack专注于构建模块化项目。Webpack的优点是：1.专注于处理模块化项目，开箱即用，一步到位；2、可通过Plugin进行扩展，功能完备，使用方便，灵活；3.使用场景不局限于Web开发：4.社区庞大且活跃，经常推出紧跟时代发展的新特性，大多数场景都可以找到现有的开源扩展：5.良好的开发体验。Webpack的缺点是只能用于采用模块化开发的项目。WebpackCommonAPI介绍webpack的工作就是递归地形成我们静态资源模块的依赖图，然后将这些模块打包成一个或多个bundle文件。它的核心API是入口、模块（加载器）、插件、输出和模式。下面我们就来看看这些API的作用和用法。entry入口起点：构建依赖的开始，通过起点文件查找和处理依赖module.exports={entry:'./path/to/my/entry/file.js'//string形式entry:['./path/to/my/entry/file.js','./path/to/my/entry/file1.js']//数组形式entry:{name:'./path/to/my/entry/file.js',name1:'./path/to/my/entry/file1.js'}//对象形式};output输出属性告诉webpack在哪里输出它创建的包，以及如何命名这些文件constpath=require('path');module.exports={entry:'./path/to/my/entry/file.js',output:{path:path.resolve(__dirname,'dist'),filename:'my-first-webpack.bundle.js',filename:'[name].js',//多导出publicPath:"http://cdn.example.com/assets/[hash]/",//cdn+hash}};loader文件处理loader允许webpack处理那些非JavaScript文件（webpack本身只懂JavaScript）。加载器可以将所有类型的文件转换成webpack可以处理的有效模块，然后你就可以使用webpack的打包能力来处理它们了。module.exports={module:{rules:[{test:/\.txt$/,use:'raw-loader'}]}}plugins从打包优化压缩，到重新定义环境变量都可以使用插件。插件接口非常强大，可用于处理各种各样的任务。它的实例是使用new运算符创建的。constHtmlWebpackPlugin=require('html-webpack-plugin');//安装module.exports通过npm={module:{rules:[{test:/\.txt$/,use:'raw-loader'}]},plugins:[newHtmlWebpackPlugin({template:'./src/index.html'})]};mode通过mode参数配置mode，使webpack在开发或生产环境内置优化。module.exports={mode:'production'//开发};resolve解析模块的解析方式。1.resolve.aliasimportUtilityfrom'../../utilities/utility';alias:{Utilities:path.resolve(__dirname,'src/utilities/'),Templates:path.resolve(__dirname,'src/templates/')}使用alias配置别名，可以参考importUtilityfrom'Utilities/utility'如下；2.resolve.moduleswebpack解析modules时应该查找的目录modules:[path.resolve(__dirname,"src"),"node_modules"]webpack使用指南配置导出webpack需要传入一个配置对象（configurationobject）.可以通过以下两种方式之一完成：终端或Node.js。除了导出单个配置对象外，还有其他导出方式：1.exportfunctionmodule.exports=function(env,argv){return{mode:env.production?'生产'：'开发'，devtool：env.production？'source-maps':'eval',plugins:[newwebpack.optimize.UglifyJsPlugin({compress:argv['optimize-minimize']//只传递-p或--optimize-minimize})]};};2。ExportpromiseWebpack会运行配置文件导出的函数，等待Promise返回。促进异步加载所需配置变量的需要。module.exports=()=>{returnnewPromise((resolve,reject)=>{setTimeout(()=>{resolve({entry:'./app.js',/*...*/})},5000)})}3.导出多个配置对象运行webpack时，将构建所有配置对象。例如，导出多个配置对象对于针对多个构建目标（如AMD和CommonJS）打包库很有用。module.exports=[{output:{filename:'./dist-amd.js',libraryTarget:'amd'},entry:'./app.js',mode:'production',},{output:{filename:'./dist-commonjs.js',libraryTarget:'commonjs'},entry:'./app.js',mode:'production',}]devServer开发1.contentBase告诉服务器在哪里提供内容。仅当您要提供静态文件时才需要。devServer.publicPath将用于确定应该从哪里提供包，并且此选项优先。默认情况下，当前工作目录将作为提供内容的目录，但可以修改为其他目录：contentBase:path.join(__dirname,"public")//可以访问public文件夹下的文件path.join(__dirname,"public"),path.join(__dirname,"assets")]contentBase:false2.publicPath在浏览器中可以访问该路径下的打包文件。publicPath始终以斜杠（/）开头和结尾publicPath:"/assets/"//将打包后的文件放入assets文件夹，通过浏览器访问3.hosthost:"0.0.0.0"//服务器外部可访问4.hot启用webpack的模块热替换特性5.proxyproxy:{"/api":{target:"https://other-server.example.com",pathRewrite:{"^/api":""},//Rewriteurlsecure:false,//https}}//也可以通过context混写proxy:[{context:["/auth","/api"],target:"http://localhost:3000",}]webpack优化待更新webpack工作流程Webpack的构建过程可以分为以下三个阶段：1.初始化并开始构建，读取并合并配置参数，加载Plugin，实例化Compiler。2.编译**：从Entry发出，依次为每个Module调用对应的Loader翻译文件内容，然后找到该Module所依赖的Module，递归编译。在编译阶段，最重要的事件就是编译，因为在编译阶段会调用Loader，完成各个模块的转换操作。在编译阶段，很多小事件会再次发生。3.Output将编译好的Module组合成Chunk，将Chunk转换成文件，输出到文件系统。
