base-loader
解析es6,将es6转化成es5,将react的jsx语法转化成浏览器可以认识的语言
1.babel-loader //针对于babel的loader文件
2.@babel/core //babel核心文件
3.@babel/preset-env //解析更高级代码
安装: cnpm i babel-loader @babel/core @babel/preset-env -D
babael官网: https://babeljs.io/setup
babael官网webapck配置:https://babeljs.io/setup#installation
React
1.react //react
2.react-dom //虚拟dom
3.@babel/preset-react //babel转模块
安装:cnpm i react react-dom @babel/preset-react -D
//
//es6
const fn=()=>console.log(123);
fn()
//map存储数据
const mp = new Map();
map.set('name','kaivon');
console.log(map);
//React
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<h2>这是jsx的语法</h2>,
document.getElementById('box')
);
//webpack.config.js
module:{
rules:[//对象
//这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变,从后往前解析
{
test:/\.js$/,
use:[
{
//loader是可以进行参数的配置的,如果需配置的话就必须放再一个对象当中
loader:'babel-loader',
options:{
pressets:['@babel/preset-env','@babel/preset-react']
}
}
],
exclude: /node_modules/, //不去找这个目录。速度更快一点,类似于:
//include:path.resolve(__dirname,'./src/js') //只去检测src文件的目录
},
]
}