webpack+react新建项目（1）

最新推荐文章于 2024-02-22 00:36:51 发布

「已注销」

最新推荐文章于 2024-02-22 00:36:51 发布

阅读量598

点赞数

分类专栏： react webpack 文章标签： webpack react.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_54012475/article/details/122851160

版权

react 同时被 2 个专栏收录

9 篇文章

订阅专栏

webpack

4 篇文章

订阅专栏

本文详细介绍了如何从零开始配置React项目，包括初始化npm，安装Webpack和Webpack CLI，集成React和React DOM，配置Babel以及创建项目目录和编写基本代码。通过这个过程，读者将学会如何构建一个简单的React应用，并理解Webpack和Babel在项目中的作用。

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

文章目录

1，初始化npm

新建文件夹react-admin，在该文件夹下打开cmd执行命令

npm init -y

2，安装webpack和webpack-cli

npm install --save-dev webpack webpack-cli

3，安装react和react-dom

npm install react react-dom

4，安装babel相关依赖和创建.babelrc文件

安装依赖

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

创建.babelrc文件

{
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ],
    '@babel/preset-react'
  ]
}

5，创建项目目录并编写代码

项目目录

react-admin
	dist
		index.html
	src
		App.js
		index.js
	.babelrc
	webpack.config.js

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react admin</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

App.js

import React from "react";
class App extends React.Component {
  render() {
    const { title } = this.props;
    return (
      <h1>hello { title }</h1>
    )
  }
}
export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App title="react"></App>, document.getElementById("root"));

webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)/,
        use: "babel-loader",
        exclude: /node_modules/
      }
    ]
  }
};

6，修改package.json文件

在scripts里新增一条语句

"dev": "webpack"

执行 npm run dev，之后会在dist文件夹下面自动生成一个bundle.js的文件。然后在浏览器打开dist文件夹下的index.html文件会看到页面上显示 hello react

package.json依赖

“devDependencies”: {
“@babel/core”: “^7.17.2”,
“@babel/preset-env”: “^7.16.11”,
“@babel/preset-react”: “^7.16.7”,
“babel-loader”: “^8.2.3”,
“webpack”: “^5.68.0”,
“webpack-cli”: “^4.9.2”
},
“dependencies”: {
“react”: “^17.0.2”,
“react-dom”: “^17.0.2”
}