如何为 React 设置 Webpack 和 Babel

我们所有人在使用 React 时都用过 CRA (create-react-app)。这是一款非常棒的工具。它让我们只需专注于 React，无需担心配置问题。今天我们将学习如何为我们的 React 应用设置 Webpack 和 Babel。

首先我们来了解一下Webpack和Babel。

✔Webpack：

它是一个模块捆绑器，可以让我们将项目文件捆绑成一个文件。

模块是一个包含定义的文件 - 包括变量和函数，一旦导入我们就可以使用它。

它需要在根文件夹中创建一个webpack.config.js文件。我们通过提供入口点信息和输出信息来告诉 webpack 如何处理我们的应用程序。

const path = require('path');

module.exports = {
  entry: './src/app.js', // relative path
  output: {
    path: path.join(__dirname, 'public'), // absolute path
    filename: 'bundle.js' // file name
  }
};

“入口” 点是我们应用程序的启动点，我们通过提供相对路径值来设置它。而 output 属性则告诉 webpack 将它创建的输出发送到哪里以及如何命名这些文件。我们必须在输出路径属性中提供绝对路径值。

✔巴别塔：

它是一个 JavaScript 编译器。Babel 本身实际上没有任何功能。是的，它是一个编译器，但默认情况下它不会编译任何东西。我们必须添加各种插件和预设来支持特定的语言特性。你可以访问Babel网站进行查看。在 Babel 网站导航栏部分，你会找到Try It Out。点击它，你会得到一个新窗口。在左侧窗口中你可以编写代码，在右侧窗口中你将获得编译后的代码。现在让我们在左侧窗口中编写一些 JSX。

const template = <p>Hello</p>;

在右侧窗口中，您将获得 JavaScript 可理解的编译代码，这些代码始终在我们的 React 应用后台运行。在左侧，您会看到一些预设选项，其中一些选项已被勾选。如果您现在取消勾选 React预设选项，您将看到一个错误，因为该React预设负责将我们的 JSX 语法转换为 JavaScript 可理解的代码。

在我们的教程中我们将使用两个预设：

@babel /preset-env：帮助 babel 将 ES6、ES7 和 ES8 代码转换为 ES5。
@babel /preset-react：将 JSX 转换为 JavaScript。

✔入门：

现在我们对 webpack 和 babel 有了一点了解。接下来让我们深入研究 React 的配置。

mkdir react-setup-tutorial cd react-setup-tutorial mkdir public src touch public/index.html src/app.js

在 index.html 文件中添加以下代码。

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>React App</title>
      </head>

      <body>
        <div id="root"></div>

        <script src="./bundle.js"></script>
      </body>
    </html>

通过运行以下命令初始化项目：

npm init -y

✔安装 Webpack 和 React：

npm install webpack webpack-cli --save-dev

我们安装了webpack-cli，以便可以在命令行中使用 webpack。

我们已经知道 webpack 需要将webpack.config.js 文件放在项目根目录下。因此，让我们创建webpack.config.js文件，并在其中写入以下代码。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  }
};

接下来，在 package.json 中添加 webpack 命令：

"scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production"
  }

Webpack 有两种模式：development和production。我们可以通过--mode参数进行设置。 production 模式会生成可在生产环境中使用的优化文件。

安装 React：

npm install react react-dom

现在在我们的app.js文件中导入 react 和 react-dom ，并添加一些 react 代码。

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

const template = React.createElement('p', {}, 'Hello from react');

ReactDOM.render(template, document.getElementById('root'));

现在在您的终端中使用以下命令并在浏览器中打开您的index.html文件。

npm start

你的应用运行良好。但你有一个问题，为什么我们没有使用 JSX？这次，让我们在app.js文件中尝试使用一些 JSX 代码。

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

const template = <p>Hello from react</p>;

ReactDOM.render(template, document.getElementById('root'));

现在再次运行我们之前的命令。

npm start

这次你会遇到错误。这是因为我们使用了 JSX，而 JavaScript 不支持 JSX。所以，如果我们想在应用中使用 JSX，就需要先编译它。我们可以通过 Babel 来实现。

✔安装并配置 Babel：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

我们已经了解了@babel /preset-env 和@babel /preset-react。那么，什么是@babel /core 和 babel-loader？

@babel /core：它允许我们从 webpack 等工具运行 babel。
babel-loader：这是一个 webpack 插件。它允许我们告诉 webpack 当遇到某些文件时如何运行 babel。

让我们通过在项目目录的根目录内创建一个.babelrc文件来配置 babel，其中包含以下内容。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

该文件将告诉 babel 使用哪些预设来转换代码。

现在是时候教 webpack 如何将 JSX 编译成 JavaScript 代码了。为此，我们需要使用 loader。loader 允许我们自定义 webpack 加载特定文件时的行为。它会通过 Babel 运行某些文件。为此，我们需要在webpack.config.js文件中通过对象的module属性设置一个 loader。module属性需要一个规则数组，其中的规则用于定义如何使用 loader。现在，我们有了一条规则，可以使用 Babel 将 JSX 转换为 JavaScript。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

这里我们设置了对象的一条规则，其中loader属性指明了我们要使用哪个加载器，我们使用了babel-loader。test属性指明了我们实际想要在哪些文件上运行这个加载器，我们希望在以.js结尾的文件上运行它。exclude属性用于排除一组文件，我们使用/node_modules/，因为我们不想通过这些库运行 babel。现在我们可以在 React 中使用 JSX 了。让我们再次运行我们的应用程序。

npm start

这次我们没有收到任何错误。在浏览器中打开你的index.html文件，它运行正常。

✔配置源映射：

让我们在webpack.config.js文件中添加一些额外的配置设置。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map'
};

这里我们使用devtool属性设置了 Source map。它增强了我们的调试过程。它用于在调试时显示原始 JavaScript，这比压缩后的代码更容易查看。

✔安装 DevServer：

在终端中运行以下命令。

npm install webpack-dev-server --save-dev

在webpack.config.js文件中添加以下代码。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  // changed line
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

接下来在 package.json 中添加webpack-dev-server命令：

"scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production",
    "dev-server": "webpack-dev-server"
  }

现在运行此命令。

npm run dev-server

它将启动开发服务器。它会输出可供访问的输出。现在，我们已将两个工具集成到一个工具中，开发服务器是我们的服务器，它也为我们运行着 Webpack。现在，我们可以访问突出显示的 URL 来获取我们的应用程序。

✔加载样式：

让我们在src目录中创建一个新文件和文件夹。

使用以下命令创建文件和文件夹。

mkdir src/styles touch src/styles/styles.css

现在在styles.css文件中添加以下样式。

* {
  color: blue;
}

要加载我们的style.css文件，我们需要在webpack.config.js文件中设置新规则。

在此之前，我们需要安装一些新的装载机。

npm install css-loader style-loader --save-dev

css-loader：允许 webpack 加载我们的 CSS 资源。
style-loader：通过注入标签获取 CSS 并将其添加到 DOM<style>。

现在在我们的webpack.config.js文件中添加新规则。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      // New rules to load css
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

在我们的 app.js 文件中导入 style.css并运行 dev-server 来查看效果。

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/styles.css';

const template = <p>Hello from react</p>;

ReactDOM.render(template, document.getElementById('root'));

如果我们想使用 SCSS，那么我们需要安装sass-loader，它可以帮助 webpack 将 sass 编译为 css。sass -loader依赖于另一个包node-sass。

npm install sass-loader node-sass --save-dev

现在通过将sass-loader与css-loader和style-loader链接起来，再次为 SASS配置webpack.config.js文件。

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      // Rules to load scss
      {
      // Some change here
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

现在将我们的style.css文件扩展名.css更改为.scss，即style.scss

同时将 app.js 中的 css 导入更改为：

import './styles/styles.scss';

并添加以下样式来查看我们的wepback是否正确地为SASS工作。

$brand-color: blue;

* {
  color: $brand-color;
}

现在使用以下命令再次运行 dev-server。

npm run dev-server

我们为 SASS 配置我们的 webpack。

就这样。现在我们已经为 React 配置好了 Webpack 和 Babel，可以用来创建我们的 React 项目了。感谢阅读，敬请期待。

鏂囩珷鏉ユ簮锛�https://dev.to/iamismile/how-to-setup-webpack-and-babel-for-react-59ph