Vue07-webpack补充

Babel 和 devServer

Babel

ECMAScript2015（ES6）---> ES5

因为不是所有的浏览器都支持ES6的语法，但是ES5是所有都支持的，所以避免尴尬，使用Babel转化

Babel命令行使用

npm install @babel/core @babel/cli -D局部安装
    将demo.js --> ES5语法
        局部命令就需要通过：npx
        --out-dir:输出到的目录
    npx babel /src/demo.js --out-dir dist 
    

插件的使用

先安装插件

    --out-file:输出到文件
    后面表示：还要在使用到这个插件
npx babel /src/demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions
    
    将let和const定义的块级作用域进行转换
    npm install @babel/plugin-transform-block-scoping-D
    
npx babel /src/demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,
@babel/plugin-transform-block-scoping

Babel的预设preset

一个一个安装插件太麻烦，我们使用预设会更加方便

npm install @babel/preset-env -D

使用预设

npx babel /src/demo.js --out-file test.js --presets=@babel/preset-env

Babel的底层原理（了解）

babel-loader

webpack只模块化的打包，并没有对内部代码进行转化 比如说：支持对import、require这种小模块进行打包 babel-loader依赖的是Babel，Babel依赖一些应用插件和自身

插件的写法

    npm install babel-loader -D
    modules:{
        rules:[
            {
            对ES6-->ES5，除了loader还要插件
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        plugins:[
                            "@babel/plugin-transform-arrow-functions",
                            "@babel/plugin-transform-block-scoping",                            
                        ]
                    }
                }
            }
        ]
    }

preset写法

    modules:{
        rules:[
            {
            对ES6-->ES5，除了loader还要插件
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{                        
                        presets:[
                            "@babel/preset-env",
                        ]
                    }
                }
            }
        ]
    }

Babel的配置文件

代替

Vue

直接在模块里引用我想用的函数
import { createApp } from 'vue'

npm install vue@next 下载最新的vue

                            指定vue版本
import { createApp } from 'vue/dist/vue.esm-bundler'
const app = createApp({

});
app.mount("#app") 挂载app

去index页面
<div id="app"></div>

Vue选择版本的时候，会有 运行时+编译器 与 仅运行时 版本的区别