1, Bable introduction

Is a separate tool, independent of webpack, but can be used with webpack
Function: convert es6 or typescript into ordinary js code
Scenario: for example, an old browser doesn't know demo Arrow function of es6 in JS

Used alone (when not used with webpack):

npm install @bable/core  @bable/cli@bable/core  @bable/cli -D
//This node_modules has bable related code

npx bable demo.js  --out-dir dist//When the file name is not changed
 This will be generated in the project dist/demo.js,And still ES6 code
npx bable demo.js --out-file test.js
 This will be generated in the project test.js still es6 code

//Because the arrow function is not used to convert the relevant plug-ins
npm install @bable/plugin-transform-arrow-functions -D

then
npx bable demo.js --out-file test.js --plugins=@bable/plugin-transform-arrow-functions

You will see test JS has no arrow function and becomes the content of es5. Success!

You can add multiple function conversion related plug-ins, such as
npx bable demo.js --out-file test.js --plugins=@bable/plugin-transform-arrow-functions,@bable/plugin-transform-block-scoping
 So you'll see test.js There is no arrow function and no block level scope(const,let Become var)

In this way, if each syntax conversion requires a plug-in, it is too troublesome, so it appears
bable Default of preset
 usage method:
npm install @bable/preset -env -D
npx bable demo.js --out-file test.js --presets=@bable/preset-env
 To sum up, bable Is a compilation tool that compiles from one source code to another.

2, Combination of webpack and bable

webpack package main JS does not convert es6 to es5,
Because this is not his job, he needs to use the bable tool integrated into webpack: bable loader

Step 1: npm install bable-loader @bable/core  @bable/cli -D Because it has been installed before, there is no need to install it
 Step 2: in webpack.config.js In, write
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
  path:path.resolve(__dirname,'./build')
  filename:'bundle.js'
  },
 module:{
  rules:[
  {
    test:/\.css$/ regular expression 
    loader:"css-loader"   Below use Grammar sugar
   use:[
   {loader:"css-loader",options:{}}
   {loader:"file-loader",options:{
      outputpath:"img",
      name:"[name]_[hash:6].[ext]"
    }}
   ]
 } 
{
    test:/\.js$/ regular expression 
    use:{
      loader:"bable-loader",
      options:{
        plugins:[       
  "@bable/plugin-transform-arrow-functions",
  "@bable/plugin-transform-block-scoping"
            ]
        preset:[//You can write this without writing plugin
         "@bable/preset-env"
        }
     }
   
 }
}

This is very bloated, because the options may be very large, so you can extract two naming methods
bable.config.js/json/cjs/mjs (recommended)
bablerc.json/js/bablejs/cjs/mjs

bable.config.js

module.exports ={
  presets:[
  "@bable/preset-env"
  ]
}

On webpack config. JS

{
test:/\.js$/
loader:"bable-loader"
}

After this configuration, the code in dist is also es5 code

3, webpack package vue file

webpack and vue
vue itself is also js code,

stay main.js Introduced in vue modular:
npm install vue@next;

import {createApp} from 'vue'
Just in the back
const app = createApp({
  template:'<h2>I am vue2 Resolved<h2>'
  data(){
    return{
     title:"hello world"
    }
  }
});
app.mount("#app");

It still can't be resolved,
Because the content of the template needs to be parsed by the vue source code, but the vue source code provides us with many versions, but all versions are divided into two categories. One is runtime + compiler (temporarily defined as version 1),
One is runtime only (temporarily defined as version 2)
If the content of template: · xxxx · needs to be parsed by complier, version 1 must be used, but version 2 is used by default
(it's ok if the template doesn't write like this, such as. vue file)
There are three ways to write DOM elements during vue development
Method 1: the method of template template requires the code in vue source code
Method 2: render function, use h function to write the rendered content, and directly return to vnode without our processing
Method 3: pass vue loader is required to write templates based on the template in vue

Analysis of different vue versions after packaging
Node on_ Module, find the vue package

3.1,vue(.runtime).global(.prod).js

First, Vue global. JS, if through the browser

3.2,vue(.runtime).esm-browser(.prod).js

Esmodule is a special vue version. This js is opened in the form of esmodule

3.3,vue(.runtime).esm-bundler.js

It is used for webpack, eolup, parcel and other construction tools
The default is with runtime, which is the main JS failed to load the template, and the solution
import {createApp} from 'vue/dist/vue.esm-bunder.js'

3.4,vue.cjs(.prod).js

Server side rendering,
Through require() in node JS

4, vscode support for sfc files

If you don't install these two plug-ins, vscode doesn't know at all What is a vue file
vetur plugin
volar plug-in

5, Write vue file

Create a vue folder
New app vue

<template></template>
<script>
export default {
xxx
data/method..
No, template,because loader It will be parsed
 After parsing, it will template Add it in and export it
}
</script>
<style>
</style>

main.js Top of middle
import App from './vue/App.vue'

const app = createApp(App);

Compilation failed because webpack does not know vue, so you need a loader (the same as css),

npm install vue-loader@next -D
npm install @vue/compiler-sfc
webpack.config.js Write in
{
  test:/\.vue$/,
  loader:"vue-loader"
}

In addition, a plug-in is needed to avoid error reporting
const { VueLoaderPlugin } = require('vue-loader/dist/index');
In the plug-in
new VueLoaderPlugin()