async & webpack & vue生命周期

async/await

• 以 async/await 为例，说明 babel 插件怎么搭

webpack的babel本身不支持async/await

需要安装

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime // `babel-plugin-transform-runtime` 插件本身其实是依赖于 `babel-runtime` 的，但为了适应 `npm install --production` 强烈建议添加该依赖。

在webpack文件夹目录新增一个. babelrc,这份是babel配置文件

然后在里面写入

{
  "plugins": ["transform-runtime", "babel-plugin-transform-regenerator", "babel-plugin-transform-es2015-modules-commonjs"]
}

把webpack的use里面的options注释掉

{
    test: /\.js$/,
    // 除了node_modules|bower_components所有的js文件都用babel-loader处理
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        // options: {
        //     presets: ['@babel/preset-env']
        // }
    }
}

生命周期

// 四大生命周期:
// 编译(创建)   beforeCreate()   created()
// 挂载         beforeMount()    mounted()       
// 更新         beforeUpdate()   updated()
// 销毁         beforeDestroy()  destroyed()


// 上台前，毫无准备 	//没数据 没模板
beforeCreate() {
    console.log("beforeCreate")
    console.log(this.$data)
    console.log(this.el)
},
// 背台词,化妆		 //有数据，没模板 
created() {
    console.log("created")
    console.log(this.$data)
    console.log(this.$el)
},

// 没登舞台			//数据有，有模板，但没有真实DOM
beforeMount() {
    console.log("beforeMount")
    console.log(this.$data)
    console.log(this.$el)
    console.log(document.querySelector(".site-header"))
},
// 登上舞台 		//有数据，有模板，也有了真实DOM(模板=>DOM)
mounted() {
    console.log("mounted")
    console.log(this.$data)
    console.log(this.$refs)
    console.log(this.$el)
    
    console.log(document.querySelector(".site-header"))
},

// 表演前			//数据更新了，模板更新了，但真实DOM没有更新
beforeUpdate() {
    alert(1)
    console.log("beforeUpdate")
    console.log(this.$data.name)
    console.log(this.$el)
},
// 表演时候   		//数据更新了，模板更新了，真实DOM也更新了
updated() {
    alert(2)
    console.log("updated")
    console.log(this.$data.name)
    console.log(this.$el)
},

// 谢幕前			//数据销毁了，模板销毁了，但真实DOM没有销毁了
beforeDestroy() {
    console.log("beforeDestroy")
    console.log(this.$data.name)
    console.log(this.$el)
},
// 谢幕后			//数据销毁了，模板销毁了，真实DOM也销毁了
destroyed() {
    console.log("destroyed")
    console.log(this.$data.name)
    console.log(this.$el)
}


// 对象
// 操作真实DOM结构是昂贵的，而操作字符串是低廉的
// 真实DOM应该少去操作，但是频繁操作模板(虚拟DOM)是不会太大影响的


// 要更改数据，在created之后更改，加载数据，ajax,jonp
// 要更改节点，在mounted之后更改，并且最好配合ref，ref改虚拟DOM
// 数据变动或者视图变动的时候可以用updated来监听  和watch和computed很相似
// 节点销毁就会出beforeDestroy生命周期

webpack

四大概念
出口
1. 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的
2. 默认值是 ./src/index.js，然而，可以通过在 webpack 配置中配置 entry 属性，来指定一个不同的入口起点（或者也可以指定多个入口起点）

    module.exports = {
        entry: './path/to/my/entry/file.js'
    };

入口
1. output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，主输出文件默认为 ./dist/main.js，其他生成文件的默认输出目录是 ./dist
2. 你可以通过在配置中指定一个 output 字段，来配置这些处理过程

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

加载器
1. 作为开箱即用的自带特性，webpack 自身只支持 JavaScript。而 loader 能够让 webpack 处理那些非 JavaScript 文件，并且先将它们转换为有效 模块，然后添加到依赖图中，这样就可以提供给应用程序使用
2. 注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图
3. 在更高层面，在 webpack 的配置中 loader 有两个特征：
(1) test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
(2) use 属性，表示进行转换时，应该使用哪个 loader

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

插件
1. loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，插件的范围包括：打包优化、资源管理和注入环境变量
2. 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

例：webpack配置文件(webpack.config.js)

const path = require('path'); //内置模块
const webpack = require('webpack'); //第三方模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 处理vue后缀必须安装该插件
// https://vue-loader.vuejs.org/zh/guide/#vue-cli
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    
    mode: "development",// 设置开发环境

    // 入口  你需要拿来做处理的文件
    // 读取src文件夹的index.js文件，把它交给webpack处理
    // 相当于gulp.src("xxxx")
    entry: './src/index.js',
    
    // 出口
    // 把上面入口文件经过处理后，把它导出到dist文件夹的bundle.js里面
    // 相当于gulp.dest("xxxx")
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[hash].js'
    },

    // webpack只能解js,如果你要处理其他文件，那就要使用loader,loader的本质其实就是插件
    module: {
        // sass less typescript ejs ES6 ES7 ES8 => ES5
        // Vue 不兼容ie8及其以下
        // 插件规则
        rules: [{
            // 如果匹配到图片格式使用url-loader处理
            // npm install --save-dev url-loader
            test: /\.(jpg|jpeg|png|gif)$/,
            use: 'url-loader'
        }, {
            // 如果匹配到样式
            // npm install --save-dev style-loader和css-loader
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            // 处理html文件
            test: /\.(html|htm)$/,
            use: ['html-loader']
        }, {
            // 处理vue文件
            test: /\.vue$/,
            use: ['vue-loader']
        }, {
            test: /\.js$/,
            // 除了node_modules|bower_components所有的js文件都用babel-loader处理
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                // options: {
                //     presets: ['@babel/preset-env']
                // }
            }
        }]
    },

    //配置插件
    plugins: [
        // 它作为打包之后生成的index.html模板
        new HtmlWebpackPlugin({
            template: './template/index.html'
        }),
        // 压缩文件
        new UglifyJsPlugin(),
        // 处理vue文件的
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            // 把所有的vue的依赖的路径改为vue/dist/vue.js
            'vue': 'vue/dist/vue.js'
        }
    },

    // 配置webpack的服务器
    // 全局安装
    // npm install webpack-dev-server -g
    // 启动 webpack-dev-server
    devServer: {
        // 服务器的文件夹
        contentBase: path.join(__dirname, "dist"),
        // 一切服务都启用gzip 压缩
        compress: true,
        // 启用 webpack 的模块热替换特性
        // hot: true,
        // 端口号  1024~65535
        port: 9000
    }
};