08.webpack5搭建vue环境(二)

1.Babel和devServer

（1）什么是babel
babel是一个工具链,主要用于旧浏览器或者环境中ES6以上的代码转换为向后兼容版本的JavaScript;包括语法转换、源代码转换等。

（2）babel命令行使用
babel本身作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。
在命令行使用Babel，安装如下库：
@babel/core ：babel的核心代码，必须安装；
@babel/cli ：可以在命令行使用babel。

 npm install @babel/core @babel/cli -D
1

新建一个demo.js文件，编辑ES6代码

const message = "helo world";
const name =["abc","123","zmy"];

name.forEach(item => console.log(item));
1
2
3
4

在命令行中输入npx babel demo.js --out-dir test //生成目录test
或npx babel demo.js --out-file test.js //生成test.js文件

但生成的文件依然是ES6语法，代码中有箭头函数，就需要安装箭头函数转换相关的插件：npm install @babel/plugin-transform-arrow-functions -D
使用插件 在命令行中输入：npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions
生成的test.js文件中的箭头函数就转换成如下代码：

const message = "helo world";
const name = ["abc", "123", "zmy"];
name.forEach(function (item) {
  return console.log(item);
});
1
2
3
4
5

但const并没有转换为var，需要用plugin-transform-block-scoping插件来完成。npm install @babel/plugin-transform-block-scoping -D
使用插件：

npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
生成的代码如下：

var message = "helo world";
var name = ["abc", "123", "zmy"];
name.forEach(function (item) {
  return console.log(item);
});

1
2
3
4
5
6

（3）babel预设（preset）
如果需要的插件很多，一个一个的下载安装会很麻烦，使用预设，常见的插件都已经封装了
命令行下载：npm install @babel/preset-env -D
使用预设：npx babel demo.js --out-file test.js --presets=@babel/preset-env

生成test.js代码如下：

"use strict";

var message = "helo world";
var name = ["abc", "123", "zmy"];
name.forEach(function (item) {
  return console.log(item);
});

1
2
3
4
5
6
7
8

（4）babel的底层原理
从一种源代码转换成另一种源代码；就是编译器；babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码。

babel拥有编译器的工作流程：
解析阶段（parsing）
转换阶段（transformation）
生成阶段（code generation）

（5）babel-loader和babel配置文件
webpack在打包的过程中不会将ES6代码转换为ES5，需要将babel和webpack联合使用通过babel loader。
命令行下载：npm install babel-loader -D
在wabpack.config.js文件中设置好：

{
	test : /\.js$/,
		use :{
			loader :"babel-loader",
				options :{
					presets : [
						"@babel/preset-env"
				    ]
			     }
		}
 }
1
2
3
4
5
6
7
8
9
10
11

babel的配置也可以单独抽取出来，
新建babel.config.js文件

module.exports={
	presets:[
		"@babel/preset-env"
	]
}
1
2
3
4
5

{
	test : /\.js$/,
	loader :"babel-loader"
}
1
2
3
4

2.webpack和vue的结合

下载vue：npm install vue
vue 打包后不同版本解析：

在index.js文件中解析templateimport {createApp} from "vue/dist/vue.esm-bundler";

import App from "./vue/App.vue"

const app = createApp(App);
app.mount("#app");
1
2
3
4

下载vue-loader ：npm install vue-loader -D

webpack.config.js文件中：

{
	test : /\.vue$/,
	loader :"vue-loader"
}
1
2
3
4

// 导入 vueloaderplugin
const {VueLoaderPlugin} =require("vue-loader/dist/index");
1
2

并在plugin中设置：

plugins :[
		new VueLoaderPlugin()
	]
1
2
3

新建的.vue文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

在App.vue中插入Helloworld组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果如下：
解决警告

在webpack.config.js文件中配置：

new DefinePlugin({
			__VUE_OPTIONS_API__:true,
			__VUE_PROD_DEVTOOLS__ : false
		})
1
2
3
4