Webpack核心loader (三）—— babel-loader

最新推荐文章于 2024-08-22 09:57:03 发布

采故事的女孩

最新推荐文章于 2024-08-22 09:57:03 发布

阅读量648

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_42416812/article/details/100072595

版权

本文详细介绍了如何使用 webpack 中的关键 loader —— babel-loader，它能够将 ES6 和 React JSX 语法转换为浏览器可识别的 JavaScript 代码。通过安装 babel-loader、@babel/core 和 @babel/preset-env，开发者可以实现对高级代码的解析。同时，文章提到了 @babel/preset-react 对于 React 项目的必要性，并提供了相应的安装步骤。

摘要由CSDN通过智能技术生成

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 're