从零构建极简版webpack+React工程：揭开脚手架的神秘面纱

2024-01-30 17:07:20

从零构建一个极简主义的 Webpack + React 工程：深入理解项目架构

项目初始化

踏入 webpack 和 React 的世界，构建一个极简主义的项目，从零开始，让我们深入理解项目内部运作机制。首先，创建一个空文件夹作为项目根目录，然后使用命令行进入该目录：

mkdir my-react-project
cd my-react-project

接下来，通过 npm 或 yarn 安装必要的依赖项，包括 webpack、React 和 ReactDOM：

npm install --save-dev webpack webpack-cli react react-dom

配置 Webpack

现在，我们需要配置 webpack。在项目根目录创建一个名为 “webpack.config.js” 的文件，这是 webpack 的配置文件。在这个文件中，我们将定义 webpack 的配置选项：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

创建项目结构

下一步，让我们创建项目结构。在项目根目录创建一个名为 “src” 的文件夹，作为源代码的存放目录。在 “src” 文件夹中，创建一个名为 “index.js” 的文件，作为项目的入口文件。

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

const App = () => {
  return <h1>Hello, React!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

运行 Webpack

要将我们的代码打包成浏览器可以识别的格式，我们需要运行 webpack。在终端中执行以下命令：

webpack

如果一切顺利，您将在 “dist” 文件夹中找到打包后的 “bundle.js” 文件。

创建 HTML 文件

最后，我们需要创建一个 HTML 文件来加载打包后的 “bundle.js” 文件。在项目根目录创建一个名为 “index.html” 的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>