loader webpack núcleo (tres) - babel-loader

de base-loader

Analizar ES6, se ES6 convertido en ES5, se convertirá en la gramática JSX reaccionar navegador puede reconocer el idioma

1.babel-loader // archivo del cargador específico para la babel

documento básico 2. @ babel / núcleo // babel

3. @ babel / preestablecido-env // código de análisis de alto nivel

安装: CNPM i babel-loader @ babel / núcleo @ babel / PRESET-env -D

 

babael web oficial: https://babeljs.io/setup

web oficial de configuración webapck babael: https://babeljs.io/setup#installation

 

Reaccionar

1.react // reaccionan

2.react-dom // dom virtual

3. @ babel / preestablecido reaccionar // módulo a su vez babel

安装: CNPM reacciono reaccionar-dom @ babel / PRESET-reaccionar -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文件的目录
        },
       ]
   }