动态组件、webpack

1. 动态组件
   • 动态组件就是 component组件 ， 组件身上可以绑定一个is属性， 用来表示某一个组件
2. is属性
   • 我们html中有一些标签是规定它的直接子元素的 ， 比如 ul li ol li selector option table这类型标签
   • 不能直接用常规的组件使用方式， 必须在对应直接子元素上绑定 is属性

  <div id="app">
    <table>
      <tr>
        <td>aa</td>
        <td>bb</td>
        <td>cc</td>
      </tr>
      <!-- is = 组件名称 -->
      <tr is = 'my-table'></tr>
    </table>
  </div>

4. keep-alive组件
   将组件的内容存在浏览器缓存中， 当我们需要重复渲染的时候， 就从浏览器缓存中去调用，这样可以减少性能消耗

  <keep-alive>
    <component is = "A"></component>
  </keep-alive>

5. 不常用指令
   • v-text vs v-html
     • 都是用来将数据插入DOM中， 但是v-html可以解析标签类型数据
   • v-cloak 解决 {{}} 语法短暂原样输出
   • v-pre 原样输出
   • v-once 只渲染一次
6. 异步组件
   • 异步组件也是一个函数， 只不过这个函数使用Promise,函数有一个返回值
7. 高阶组件(HOC) higt order component
   1. 高阶组件是一个函数， 这个函数的作用是进行组件的复用
8. 自定义插件
9. webpack
   1. 前端的工程化工具
      • grunt
        • 资源打包
        • 单元测试
      • gulp
        • 流式操作工具
        • 资源打包
      • browserify(webpack前身)
      • webpack 【 主流 】
        • 资源打包工具， 比如 js文件打包压缩 ， img 打包压缩 。。。
        • 可以自动解决模块化依赖问题
        • es6模块化
   2. 前端的环境

      • 开发环境 localhost:3000

      • 生产环境

      • 测试环境

      • 预发布环境

      • 上线环境

      • 开发环境 和 生产环境 都是有前端静态服务器来提供

      • 测试环境 本地客户端服务器提供

      • 预发布和上线环境是 nginx

   3. webpack.config.js配置

      1. 单页面

         • 入口文件
           entry: 相对路径
         • 出口文件
           • 配置hash

             output: {
               path: path.resolve(__dirname,'dist'),
               filename: 'js/app_[hash:6].js' 
             }
           

           • 问题： 为什么要跟hash?
           • 版本迭代的时候， 不进行文件的覆盖
         • 转换器： 将某一类型的文件转成另一个类型文件的一个工具，我们常用loader来表示
         • webpack中 ， 所有其他类型文件全部都要js文件
           • 举例： css文件
           • 所有的loader用一个module的配置项表示

             module: {
               rules: [
                 {
                   test: /\.css$/,
                   use: ['style-loader','css-loader'] //注意： 这两个loader的顺序不能颠倒
                 } //每一个对象表示一个类型文件的转换器
               ]
             }
           

      2. 多页面 ： 指的就是多个入口文件

         • 修改入口配置

            entry: {//多页面
              // key: value   key就是入口文件的名称， 值就是入口文件的路径
              index: './src/index.js',
              app: './src/app.js'
            },   
         

         • 修改出口配置

            output: {
              path: path.resolve(__dirname,'dist'),
              // filename: `js/app_[hash:6].js`
              filename: 'js/[name]_[hash:6].js'
            },
         

      3. 自动解决模块依赖问题