https://www.cnblogs.com/ajianbeyourself/p/8863023.html
- webpack 是一个打包工具，根据文件之间的以来关系，将文件进行打包
- babel 将ES6转成浏览器可识别的ES5
- CommonJS 是一种规范
背景
目前大部分浏览器都不支持ES6的语法【部分支持】，例如360浏览器支持let 却不支持箭头函数
babel就承担了 翻译的工作，将ES6的写法转换为ES5的写法
webpack是遵循CommonJs 规范的，从webpack.config.js 可以看出
// module.exports 是commonJS的接口输出规范，ES6的规范是export
module.exports = {
entry: path.join(__dirname,'index.js'),
output: {
path: path.join(__dianame, 'outs'),
filename: 'index.js'
}
}
浏览器不支持commonjs规范： https://ruanyifeng.com/blog/2015/05/commonjs-in-browser.html
commonJS规范： https://zhaoda.net/webpack-handbook/commonjs.html
关于webpack，babel，Ed6，commonJS之间的关系： https://www.cnblogs.com/ajianbeyourself/p/8863023.html
浏览器加载CommonJs模块的原理与实现
原理
浏览器不兼容CommonJs的根本原因，在于缺少四个Node.js环境的变量
- module
- exports
- require
- global
前端工程化
概念
1. 持续集成：【CI】continuous integration
强调开发人员提交了新的代码之后，立刻进行构建。单元测试。
根据测试结果，我们刻印确定新代码和原有代码能否正确地集合在一起
image.png
- 持续交付【CD】continuous delivery
在持续集成的基础上，将集成后的代码部署到预发布环境（更贴近真实的运行环境）。
比如：完成单元测试之后， 可以将代码部署到连接数据库的staging（预发布）环境中进行更多的测试。如果代码没有问题，可以继续手动部署到生产环境。
下图是CI/CD的大概工作模式：
image.png
