Webpack+Babel+React 预览-JavaScript中文网-JavaScript教程资源分享门户

Webpack、Babel 和 React 是开发前端应用程序时的强大工具。Webpack 是一个模块打包器，可以将多个 JavaScript 文件打包成一个文件。Babel 可以将 ES6 代码转换成浏览器能够理解的 ES5 代码。React 是一个用于构建用户界面的 JavaScript 库。在这篇文章中，我们将学习如何使用 Webpack、Babel 和 React 开发前端应用程序，并进行预览。

安装

首先，我们需要安装所需的工具。我们可以使用 npm 包管理器来安装这些工具。打开终端，输入以下命令：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom

我们安装了 Webpack、Babel、React 和 React DOM。Webpack CLI 和 babel-loader 将帮助我们使用这些工具。

配置

现在我们需要配置 Webpack 和 Babel。在项目的根目录下，创建一个 webpack.config.js 文件。在这个文件中，我们将配置 Webpack，以便它可以将我们的代码打包成一个文件。

// javascriptcn.com 代码示例
const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
}

在这个配置文件中，我们使用 entry 指定了我们的入口文件。Webpack 将会从这个文件开始打包。我们指定了 output，告诉 Webpack 打包后的文件应该保存到哪里。在这里，我们将文件放到 public/js 目录下，并将文件名命名为 bundle.js。

我们还定义了一个 module，在其中定义了一个 rule，告诉 Webpack 如何处理 JavaScript 文件。我们使用 babel-loader 和 @babel/preset-env 和 @babel/preset-react 预设来转换我们的代码。

现在，我们需要在项目的根目录下创建一个 src/index.js 文件，输入以下代码：

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
)

在这个代码中，我们导入了 React 和 ReactDOM。然后，我们呈现了一个简单的 h1 标签。

现在，我们已经完成了配置和编码步骤。我们可以通过运行以下命令来打包我们的代码：

npx webpack

我们会看到一个新的 bundle.js 文件生成在 public/js 目录下。

预览

我们可以在浏览器中预览我们的应用程序。在项目的根目录下创建 public/index.html 文件，并在其中输入以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack + Babel + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="js/bundle.js"></script>
  </body>
</html>

在这个代码中，我们定义了一个 div 元素，其 ID 是 root。我们还导入了我们的打包后的 JavaScript 文件。

现在，我们可以打开 index.html 文件来预览我们的应用程序。

总结

在这篇文章中，我们学习了如何使用 Webpack、Babel 和 React 开发前端应用程序，并进行预览。我们学习了如何配置 Webpack 和 Babel，将我们的代码打包成一个文件。我们还学习了如何在浏览器中预览我们的应用程序。现在，你可以使用这些工具来开发任何类型的前端应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654392e27d4982a6ebd5df06