使用react第一步：搭建环境（webpack）

最新推荐文章于 2025-07-04 22:41:26 发布

zhaoyuhui1994

最新推荐文章于 2025-07-04 22:41:26 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： React webpack

本文链接：https://blog.youkuaiyun.com/qq_17451827/article/details/79388933

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了一个使用React构建项目的完整步骤，包括安装Node.js、创建项目结构、安装Webpack及相关依赖、配置Webpack、安装React及React DOM等核心组件，并通过示例代码展示了如何运行项目。

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

项目中要用到react,在此总结一下流程。

1.安装node.js

2.新建一个根目录，名为myapp . 在这个目录下执行命令行

npm init

顺序输入name等信息

此时package.json已生成。因为之后的webpack是本地安装的，所以需要修改一行代码，这样之后我们就能用命令行npm start来进行打包了。

 "scripts": {
    "start": "webpack"
  },

3.在myapp目录下命令行本地安装webpack（不建议全局安装，）

npm install --save-dev webpack

此时生成node_modules文件夹与package.lock.json

4.在myapp目录下命令行安装react等包（–save命令可将包添加至package.json）

npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

5.在myapp目录下新建index.html webpack.config.js index.js

//webpack.config.js
const path =require('path');
module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test:  /\.js$/, 
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["es2015","react"] 
        }
      }
    ]
  }
};

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
  ReactDOM.render(
    <h1>我的第一个react例子</h1>,
    document.getElementById('root')
  );

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

6.在myApp文件夹下命令行