目录：
一、Bable介绍
是一个单独的工具，与webpack独立，但是可以和webpack一起使用
作用：es6或者 typescript 转化为普通的js代码
场景：比如一个旧浏览器不认识demo.js中的es6的箭头函数
单独使用（不和webpack一起使用时）：
npm install @bable/core @bable/cli@bable/core @bable/cli -D
//这样node_modules就有bable相关代码了
npx bable demo.js --out-dir dist//不改变文件名字时
这样会在项目生成dist/demo.js,并且还是ES6代码
npx bable demo.js --out-file test.js
这样会在项目生成 test.js 还是es6代码
//因为没有使用箭头函数转换相关的插件
npm install @bable/plugin-transform-arrow-functions -D
然后
npx bable demo.js --out-file test.js --plugins=@bable/plugin-transform-arrow-functions
这样就会看到test.js没有了箭头函数，变成了es5的内容,成功！
可以加多个函数转换相关的插件比如
npx bable demo.js --out-file test.js --plugins=@bable/plugin-transform-arrow-functions,@bable/plugin-transform-block-scoping
这样就会看到test.js没有箭头函数，也没有了块级作用域(const,let变成了var)
这样每个语法转换都需要插件的话，那也太麻烦了，于是出现了
bable的预设preset
使用方法:
npm install @bable/preset -env -D
npx bable demo.js --out-file test.js --presets=@bable/preset-env
综上可见，bable是一个编译工具，从一个源代码编译成另外一个源代码。
二、webpack与bable结合
webpack打包main.js时不会转es6为es5,
因为这不是他的工作，这是就需要用到集成到webpack的bable工具:bable-loader
第一步：npm install bable-loader @bable/core @bable/cli -D因为之前安装过，所以不用安装了
第二步：在webpack.config.js中，写上
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'./build')
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/ 正则表达式
loader:"css-loader" 下边use的语法糖
use:[
{loader:"css-loader",options:{}}
{loader:"file-loader",options:{
outputpath:"img",
name:"[name]_[hash:6].[ext]"
}}
]
}
{
test:/\.js$/ 正则表达式
use:{
loader:"bable-loader",
options:{
plugins:[
"@bable/plugin-transform-arrow-functions",
"@bable/plugin-transform-block-scoping"
]
preset:[//不写plugin也可以这么写
"@bable/preset-env"
}
}
}
}
这样很臃肿，因为options可能会很大，于是可以抽取出来，两种命名方式
bable.config.js/json/cjs/mjs（推荐）
bablerc.json/js/bablejs/cjs/mjs
bable.config.js中写上
module.exports ={
presets:[
"@bable/preset-env"
]
}
在webpack.config.js中
{
test:/\.js$/
loader:"bable-loader"
}
这样配置后，dist中的代码也是es5的代码了
三、webpack打包vue文件
webpack与vue
vue本身也是js代码，
在main.js中引入vue模块:
npm install vue@next;
import {createApp} from 'vue'
在后边就可以
const app = createApp({
template:'<h2>我是vue2解析出来的<h2>'
data(){
return{
title:"hello world"
}
}
});
app.mount("#app");
这样还是不能解析出来，
因为template的内容需要vue源码对其进行解析，但是vue源代码给我们提供了很多版本，但是所有版本分为两类，一种是runtime+compliler（暂时定义为版本一）,
，一种是runtime-only（暂时定义为版本二）
如果写了template：·xxxx·内容的话，需要compliler解析那么必须用版本一，但是默认用的是版本二
(如果template不这么写的话就没事儿，比如.vue文件）
vue开发过程中有三种方式编写DOM元素
方式一：template模板的方式，需要vue源码中的代码
方式二：render函数的方式，使用h函数来编写渲染的内容，直接返回vnode，不用我们处理
方式三：通过.vue中的template来编写模板，需要vue-loader
打包后不同vue版本解析
打开node_module后，找到vue包
3.1、vue(.runtime).global(.prod).js
首先说vue.global.js,如果通过浏览器
3.2、vue(.runtime).esm-browser(.prod).js
esmodule专用vue版本，这个js打开是esmodule形式的
3.3、vue(.runtime).esm-bundler.js
用于webpack,eollup,parcel等构建工具
默认是带runtime的，这就是上边main.js没有加载出template的原因，解决办法
import {createApp} from ‘vue/dist/vue.esm-bunder.js’
3.4、vue.cjs(.prod).js
服务器端渲染使用，
通过require()在node.js中使用
四、vscode对sfc文件的支持
如果不安装这两个插件，那么vscode根本不认识.vue文件是啥
vetur插件
volar插件
五、编写vue文件
新建一个vue文件夹
新建App.vue
<template></template>
<script>
export default {
xxx
data/method..
没有template,因为loader会对其解析
解析后就会把template加入到里边并导出去
}
</script>
<style>
</style>
main.js中最上边
import App from './vue/App.vue'
const app = createApp(App);
编译失败，因为webpack不认识.vue,所以需要一个loader，(和css一样),
npm install vue-loader@next -D
npm install @vue/compiler-sfc
webpack.config.js中写上
{
test:/\.vue$/,
loader:"vue-loader"
}
此外还需要一个插件才能不报错
const { VueLoaderPlugin } = require('vue-loader/dist/index');
在插件里
new VueLoaderPlugin()
