1： 我们在使用组件的时候，不能和库发生冲突
2： 在使用 export  default 的时候。
         a/index.js:  export defalult {}
        在引入的时候， 可以定位到目录文件夹就可以了， 默认会找对应的文件夹中的index.js
          import obj  from 'a' ;
3:   在编译  es6 的时候， 不需要对所有的浏览器都编译， 如果浏览器支持  es6   ,我们在编译为es5  ,会降低浏览器的性能。
4： webpack 默认只能处理 js 。 css  只能使用插件去支持
5:  单页应用是使用各个不同的组件组合而成的， 所以我们尽量把各个不同的组件放到不同的文件夹中
6： 建议不要使用css in js 不方便分离 ， 这样效果不好， 因为这样会生产 300多kb的代码，
        如果css分离出来， js会释放很多代码
7： webpack每改一次， api都变一次， 非常的烦人
8： 2个非常重要的包，因为所有的开发工作中的细节都会用到这2个包
            1： yargs
            2:  xshelljs
9:  在变量声明的时候使用_代表私有变量
10： 通过yargs-parser 就可以区分是上线环境还是生产环境， 然后就可以导入不同的js做一下区分
11：提取插件，能够将css提取出来      mini-css-extract-plugin
12： 一般项目中不需要styleloader， 不需要往页面里边插入， 直接提取css
13: 尽量不要使用cli， cli会把人写残废的
14: 在安装 npm  包　的是后一定不要看清楚，　不要不小心安装了野包　
15:　原生浏览器已经支持发送ajax请求了
            fetch('/api/test').then(response=>response.json()).then(data=>{console.log(data)})
    做统计发请求用 ： navigator.sendBeacon('/abf.do') ， 不会占用主线程
16 : 安装webpack-dev-server
         运行的时候在内存中运行的， 这样我们在开发的时候就会非常的方便
17 ： 模范注释：　 可以改变ChunkName的名字
        import(/* webpackChunkName:"async-banner"*/"./components/banner/index.js").then(_=>{
            _.default.init() ;
            console.log('调用了第二次成功了')
        });
18 :   webpack js 配合 tree  shek  强制把不需要的代码给干掉
19 : 多页转为单页， 班主任讲过。　
２０： pjax 转单页

-------------------  架构师启蒙课　第二讲　　－－－－－－－－－－

２１　：　 webpack4 和　之前的是有一些差别的，把一些复杂的插件给罗到外边去了　
             optimmization:{

             }
22 : webpack 没有 css 的 tree shek . 需要自己弄。
２３：const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩 css 使用的，还可以去除无用的ｃｓｓ类
24 ： 如果我们在使用第三方npm包的时候，如果使用的变量声明的还是var ， 就说明比较老了， 能用就用，能不用就不用 。
25: 	单页的初始化加载流程：

        		1：入口
        		2： router
        		3: service
        		4: view
        		5:
        	为什么大型的项目没有人这么干???
        		1: 会出现大量的白屏时间
        	 view
26: optimmization :  以下2个属性非常非常重要
        namedChunks :
        moduleIds  :
        splitChunks:{

        }
        runtimeChunk:{//webpack核心运行时

        }
27:  单页应用中的loading有2种玩法 。
        1： 直接注入到标签内
        2： 添加解析js加载，可以写一个插件，能够写一个真实的loading
            把所有的js放入到一个数组里边去，可以做一个真loading
28: webpack 运行时的代码得提取出来。
29 : 自己配置babel-loader
30 : 提取公共的代码 ：
         optimization: {
                noEmitOnErrors: false,//如果报错，不打包
                splitChunks:{// 配置公共包, 当一个js文件多次被引入的时候， 提取出来
                    cacheGroups:{
                        commons:{
                            chunks:'initial',
                            name:'common',
                            minChunks:2,// 一般都是2
                            //minChunks:2, webpack考虑到性能优化的问题， 如果一个公共js的大小没有30kb就不拿出来作为一个请求
                            //minChunks:1, 强制性的提取公共的包
                            maxInitialRequests:5,
                            minSize:0// 文件最小是0
                        }
                    }
                },
31 ： 配置图片压缩的loader ;


32 : 技术选型：

        1：  单页应用场景：
                        1: 内部系统
                        2：移动端
                        3：三大框架
        2：  单页的路由    2中    pushstate    hash
        3：   JQ  三大框架   微前端
        4：
×××××××××××××××××××××                                       ×××××××××××××××××××××

                    webpack 只是认识js  其余的全都是 loader

×××××××××××××××××××××                                       ×××××××××××××××××××××


    ******************多页考研技术， 单页相对比较简单*****************************


    -------------------   加载中 样式和html------------
    <div class="loading-bg"></div><div class="loading sk-fading-circle selected" style=""><div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div><div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div></div>
    <style>
    .sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}
    .sk-fading-circle .sk-circle:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#fff;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}
    .sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
    .sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}
    .sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
    .sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}
    .sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}
    .sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
    .sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}
    .sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}
    .sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}
    .sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}
    .sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}
    .sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
    .sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}
    .sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}
    .sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}
    .sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}
    .sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}
    .sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}
    .sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}
    .sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}
    .sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}
    .sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}
    @-webkit-keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}
    40%{opacity:1}
    }
    @keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}
    40%{opacity:1}
    }
    .loading.sk-fading-circle.selected{height:60px;width:60px;top:50%;left:50%;z-index:999;position:absolute;margin-left:-30px;margin-top:-30px}
    .loading-bg{position:fixed;width:100%;height:100%;left:0;top:0;z-index:99;background:#f0f9ff;background:-moz-linear-gradient(top,#25597b 0,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);background:-webkit-linear-gradient(top,rgba(240,249,255,1) 0,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);background:linear-gradient(to bottom,rgba(240,249,255,1) 0,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff', GradientType=0 )}

    </style>



************************      Begin 自己扩展  **************************
1 ： element-ui 
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：
# For babel6
npm i babel-plugin-component@0 -D

************************      Begin 自己扩展  **************************