前端工程化一直是前端的一块重点，目前在前端市场站稳脚跟的也就有Gulp和webpack
我想找的是能够快速进行业务开发，傻瓜式并且生态很好的纯粹的打包工具.加之最近才开始慢吞吞的鼓捣vue,于是就看上了webpack.在这里跟大家交流下学习webpack的心得。
Webpack.config.js配置选项
entry
配置入口
可以单入口(把所有文件打包成一个文件)
可以多入口(将文件分开打包成多个文件，减少单个文件的体积大小)
externals
声明不加入打包流程的文件(多用于第三方库)
表示这个依赖项是外部lib，如jquery,它不会和业务js一起打包.这样有一个好处，改动业务代码重新打包，不会将那些体积巨大的第三方库打包了，利好啊有木有
devtool
devtool:'source-map'
开启生成source-map,便于在chrome里调试
很多情况下，我们开发的代码，和真正在浏览器里跑的代码(构建后的代码)是不一样的，这样会造成调试的不方便.实现一下,如果我们要在浏览器里断点调试业务js,但这个业务js是n多个js合并压缩混淆之后生成的一个aio.js,鬼才能在这种情况下调试.
所以为了解决这个问题，一般的构建工具会分环境来构建. 比如维护dev和prod的两套配置，在开发时候跑构建工具的dev配置,不对资源文件进行合并和压缩，从而减少构建后的代码和开发代码的差异性，方便在浏览器里进行调试.
真正上线的时候,跑构建工具的prod配置，对资源文件进行合并压缩.
还有一种调试方案，就是sourcemap, 我们可以在浏览器环境跑aio.js,它的确是被合并压缩混淆后的产物. 但是如果我们有sourcemap，就可以根据这个sourcemap逆向推出aio.js合并压缩混淆之前的各个文件的状态.
简单的说，开启生成sourcemap的选项后
a.js+b.js+c.js合并压缩混淆后 生成aio.js+sourcemapaio.js+sourcemap可以逆推生成a.js/b.js/c.js合并压缩混淆前的状态
P.s source map的调试依赖于chrome浏览器
cmd+opt+i进入开发者模式setting里Sources的选项可以开启js和css的source map调试选项
开启webpack.config.js里的
devtool:'source-map'用
webpack-dev-server打包项目进入chrome调试项目,你可以在
sources->webpack://里看到bundle.js经过source－map映射后的解压缩文件(如果要对sass进行sourcemap调试，需要在sass-loader里再显示开启source-map)
chrome里开启sourcemap选项
sourcemap调试Js
sourcemap调试Sass
output
filename - 构建出的文件名称
path - 开发环境下的访问路径
publicPath － 生产环境下的访问路径(cdn)
module/loaders
最重要的就是loader,用来加载资源模块
test - 匹配的文件正则
exclude - 排除某些文件
include - 包含某些文件
loader - 对匹配的文件要使用的loader，通过
!可以完成多loader处理，方向从右向左，通过?加参数的方法对loader开启一些配置
plugins
配置对应的插件来拓展及优化打包流程(比如抽出公共js/css/等等)
resolve
用来偷懒的属性, 用了它, require文件的时候不需要带后缀名了,引用路径也变短了,老大再也不用担心我写错了
转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » webpack入门小记
