前端工程化
一、在学习webpack前，我们需要了解一下什么是前端工程化？
小白眼中的前端开发：
（1）会写HTML+Css+Javascript就会前端开发
（2）需要美化页面样式，就拽一个bootstrap过来
（3）需要操作Dom或发起Ajax请求，在拽一个jQuery过来
（4）需要渲染模板结构，就用art-template等模板引擎
实际的前端开发：
（1）模块化——js的模块化、css模块化、其他资源的模块化
（2）组件化——复用现有的ui结构、样式、行为
（3）规范化——目录结构的划分、编码的规范、接口的规范、文档的规范、Git分支的管理
（4）自动化——自动化部署、测试、构建
那么当我们知道工程化的概念之后，就在想什么是前端工程化呢？
前端工程化是把企业级的前端项目开发，把前端开发所需要的工具、技术、流程、经验等进行规范化、模块化、组件化、自动化。
好处： 让前端开发能够自成体系，覆盖前端项目从创建到部署的方方方面面，最大程度的提高了前端开发效率、降低技术选型、前后联调等带来的沟通成本。
解决方案：
早期的前端工程化方案：
grunt www.cnblogs.com/evelyn2/p/7…,
gulp blog.csdn.net/qq_44884619… ,
目前主流的前端工程化方案：
webpack blog.csdn.net/SongD1114/a…,
parcel blog.csdn.net/weixin_6461…
二、目前主流前端工程化方案之 —— Webpack
1，什么是webpack?
webpack是前端项目工程的具体解决方案。功能：提供了友好的前端模块化开发支持，及代码压缩混淆、处理浏览器兼容端javascript的兼容性、性能优化等强大的功能。
好处：让程序员把工作重心放到具体功能的实现上，提高开发效率和项目的可维护性
---Es6的高级语法在浏览器中会存在一些兼容问题，使用webpack把有兼容性的代码转换成没有兼容性的代码
2，安装和配置webpack
（1）安装webpack的两个包
（2）在项目中配置webpack
3，mode的可选值：
（1）development——开发环境，不会对打包生成的文件进行代码压缩和性能优化。打包的速度快，适合在开发阶段使用。
（2）production——生产环境，会对打包生成的文件进行代码压缩和性能优化。打包的速度很慢，仅适合在项目发布阶段使用。
4，webpack.config.js文件的作用：
webpack.config.js是webpack的配置文件，webpack在真正打包构建之前会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：webpack是基于node.js开发出来的打包工具，所以在它的配置文件内支持使用node.js的相关语法和模块进行webpack的个性化配置
5，webpack中的默认约定：
（1）默认的打包入口文件为：src---index.js
（2）默认的输出文件路径为：dist---main.js
我们可以自定义打包的入口和出口：
每次修改后 都要重新执行命令，重新打包操作
三，Webpack的插件
1，webpack-dev-server——类似于node.js的nodemon工具，每次修改源代码，webpack会自动进行项目的打包构建。
第一步：
第二步：
第三步：如何访问实时打包的dist下面的文件
2，html-webpack-plugin——类似于模板引擎插件，可以通过这个插件自制index.html页面的内容。通过html-webpack-plugin插件，将src目录下的index.html首页复制到项目根目录中一份
第一步：
第二步：直接访问项目根目录 http://localhost:8080/ 就可打开看到项目在页面展示的效果。
###### 这步操作下来可能会报错，报错的原因：webpack版本高，还有html-webpack-plugin一些js代码问题
##### 解决如下：
html-webpack-plugin注意事项：
dist目录也可以删掉，因为当前实时打包是打包根目录下的index.html和bundle.js(这两个文件在内存中，看不到）
3，配置devServer节点：配置完重新启动项目
四，loader加载器的使用
1，什么是loader加载器？
2，loader加载器的执行过程：
3，使用webpack中的loader，打包css文件：
第一步：
第二步：
4，使用webpack中的loader，打包less文件：
第一步：
第二步：
5，使用webpack中的loader，处理URL图片后缀名路径文件：
第一步:
第二步：
6，使用webpack中的loader，处理URL图片大小是否需要转base64：
7，使用webpack中的loader，loader以对象的形式配置：
8，使用webpack中的loader，打包处理js中的高级语法：
webpack只能打包处理一部分高级的Javascript语法。对于那些webpack无法处理的高级语法js语法，需要借助于babel-loader进行打包处理。
以下情况：
解决：
第一步下载：
第二步配置：
五，打包发布
1，为什么要打包发布？
在项目开发完成之后，使用webpack对项目进行打包发布的原因是：
（1）在开发环境下，打包生成的文件存放在内存中，无法获取到最终打包生成的文件。
（2）在开发环境下，打包生成的文件不会进行代码压缩和性能优化 。
2，配置webpack打包发布的节点：配置完成执行npm run build命令打包
3，整理dist目录下的文件：
（1）把js文件统一生成到js目录中：
（2）把image图片统一生成到image目录中：
（3）配置好后，执行npm run build打包 需要先删除dist文件夹。（不删除会看到重复的文件）
4，如何每次执行打包命令后自动清理dist目录下的文件？
5，企业级项目如何打包发布？
六，学习Source Map
1，生产环境遇到的问题：
在前端项目投入生产之前，都需要对javascript源代码进行压缩混淆，从而减小文件的体积、提高文件的加载效率。但此时会产生一个问题？ 对压缩混淆之后的代码除错是一件困难的事情比如 变量被替换成没有任何语义的名称，空行和注释被剔除
如下图：
2，这个时候用到Source Map 解决生产环境遇到的问题：
Source Map是一个信息文件，里面储存着位置信息。也就是说sourceMap文件中存储着代码压缩混淆前后的对应关系。用它可以在出错的时候 直接显示原始代码，而不是转换后的代码！能够极大方便后期的调试。
3，webpack在开发环境下source Map配置；
（1）source Map代码出错提示：
（2）source Map会存在错误代码提示位置的偏差：
（3）解决source Map 问题：
4，webpack在生产环境下source Map配置；
（1）在生产环境中的source Map:
（2）利用source Map在生产环境中只想定位错误，不想暴露源码的配置:
（3）利用source Map在生产环境中 想定位错误行数，展示具体报错源码 的配置:此方法不建议使用，不安全！！！
