webpack随笔02-babel-loader

uikoo9

已于 2022-03-14 19:34:11 修改

阅读量921

点赞数

CC 4.0 BY-SA版权

分类专栏： JS全栈-webpack 文章标签： webpack 前端 javascript babel-loader react

于 2022-03-14 19:32:01 首次发布

本文链接：https://blog.csdn.net/uikoo9/article/details/123485942

JS全栈-webpack 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用Babel将jsx语法转换为浏览器可识别的代码，以便在webpack中支持React组件。讲解了安装Babel及其相关插件的步骤，并提供了webpack配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【前言】

使用webpack，或者说前端开发逃不开babel，Babel · The compiler for next generation JavaScript

简单的说，目前浏览器的环境不支持一些高级js特性，babel用来抹平这些特性，

通过babel可以讲高级特性写的js代码转为浏览器支持的版本，比如将es6的代码转为es5的代码

【babel支持react】

假设目前有一段简单的react代码，如下

由于其中采用了jsx语法，如何使webpack支持jsx语法，需要依赖于babel-loader的支持

安装相关npm包

npm install -D babel-loader @babel/core @babel/preset-react

webpack配置文件中添加jsx的rule

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { presets: ["@babel/preset-react"] }
      },
    ],
  },

构建后，效果如图

以上代码详见：https://github.com/insistime/webpack-guides/tree/1.0.3