webpack经验记录webpack大法好回头fis保证安全打包工具的前端工程一直是前端的重点。之前在搭建工具的选择上，公司也是很早就从grunt/gulp到fis云集了。fis确实是一个很好的工具，作为工具核心的依赖表是一个非常好的构建思路，也是很多大公司一直在使用的构建工具。不过个人fis生态不习惯，不是很好。它太大太重了。相比于一个简单的打包工具，它更像是一个前端构建的解决方案。从个人角度来说，跑一个demo，做一个单页，投入太多的精力和时间去构建工具，是不值得的。我要找的是一个能够快速开展业务，傻瓜式且生态良好的纯打包工具。另外，最近才开始慢慢鼓捣vue，所以看上了webpack。这里简单记下最近学习webpack的心得。webpack.config.js配置选项入口entry:"./entry.js",entry:{entry1:'./entry1.js',entey2:'./entry2.js'}配置入口可以是单入口（包allfilesintoonefile)ormultipleentries(packageallfilesintoonefilesfilesareseparatedpackagedintomultiplefilestoreducethesizeofasinglefile)externalsexternals:{'$':'window.Jquery'}声明的文件是不参与打包过程（多用于第三方库）说明这个依赖是外部lib，比如jquery，不会和业务js一起打包。这样有个好处，改业务代码重新打包，不会把那些庞大的第三方库打包。生成source-map，方便在chrome中调试。很多时候，我们开发的代码和实际在浏览器中运行的代码（构造后的代码）是不一样的，这会给调试带来不便。让我们实施它。如果我们想在浏览器中断点调试业务js，但是这个业务js是一个aio。构建工具会根据环境进行构建。比如维护dev和prod两套配置，开发时运行构建工具的dev配置，不合并压缩资源文件，从而减少构建代码和开发代码的差异，方便Debug在浏览器中。真正上线的时候，运行构建工具的prod配置，合并压缩资源文件。还有一个调试方案，就是sourcemap，我们可以在浏览器环境下运行aio.js，确实是合并压缩后的产物。但是如果我们有一个sourcemap，我们就可以根据这个sourcemap来反推aio.js合并压缩后的混淆之前文件的状态。简单的说，开启生成sourcemap的选项后，将a.js+b.js+c.js合并、压缩、混淆生成aio.js+sourcemappaio.js+sourcemap，反过来生成a。js/b.js/c.js合并压缩混淆前的状态P.ssourcemap调试依赖chrome浏览器cmd+opt+i在developermodesetting中进入Sources选项开启js和csssourcemap调试选项开启网页包。devtool:config.js中的'source-map'使用webpack-dev-server打包项目，进入chrome调试项目。在chrome中可以在sources->webpack://文件中看到source-map映射后bundle.js的解压（如果要为sass调试sourcemap需要在sass-loader中显示并启用source-map），enablesourcemapoptionsourcemapdebuggingJssourcemapdebuggingSassoutputoutput:{filename:"bundle.js"path:'dist/js/',publicPath:'/assets/'}filename-构建的文件名path-访问路径开发环境publicPath——生产环境（cdn）中的访问路径{test:/\.scss$/,loader:'style!css!sass?sourceMap'//启用source-map},{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}]}最重要的是loader，用于加载资源模块test-匹配文件regularexclude-排除部分文件include-包含部分文件loader-要使用的loader对于匹配的文件，通过！可以完成multi-loader的处理，方向是从右到左，通过加参数的方式为loader开启一些配置插件来配置相应的插件来扩展和优化打包过程（比如提取publicjs/css/etc.)forresolve是一个惰性属性，使用它，你require一个文件的时候不需要加后缀，引用路径也缩短了，不用担心我做一个mistorseresolve:{//如果要找模块，从这里开始找根：'/pomy/github/flux-example/src',//绝对路径//自动扩展文件后缀，也就是说我们requiremoduleextensions中可以省略后缀：['','.js','.json','.scss'],//模块别名定义，方便后续直接引用别名，不用写长地址alias:{AppStore:'js/stores/AppStores.js',//后续直接require('AppStore')ActionType:'js/actions/ActionType.js',AppAction:'js/actions/AppAction.js'}}
