从零开始搭建React+webPack框架

最新推荐文章于 2025-05-30 09:02:00 发布

追逐春天的大孩子

最新推荐文章于 2025-05-30 09:02:00 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/weixin_43709908/article/details/107847618

react 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了一个React项目的搭建过程，从创建项目、安装依赖到配置Webpack，再到启动项目，适合React初学者快速上手。

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

今天晚上公司的大佬给我们这些菜鸟进行了技术分享，收获了很多，希望以后能够得到更多的分享。
转入正题：
新建一个文件夹myReactApp，并初始化项目 npm init
切换到我们的文件夹当中 cd myReactApp
1.安装依赖
安装react库

npm i react react-dom

下一步安装babel，webpack

# babel依赖
npm i @babel/core @babel/preset-env @babel/preset-react

# proposal-class-properties插件可以使用类属性'='赋值的写法
npm i @babel/plugin-proposal-class-properties

# 安装webpack
npm i webpack webpack-cli
npm i webpack-dev-server  # 本地开发的dev服务器
npm i html-webpack-plugin # 将打包后的js文件插入html模板

安装loader转换器

npm i babel-loader                          # jsx转换器
npm i style-loader less-loader css-loader   # less转换器

2.配置项目

1.编写index.jsx

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

const App = (props) => {
    return <div>my first react app</div>
}

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

2.编写模板index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

3.配置webpack打包
有了基本文件，开始配置webpack，新建一个webpack.config.js

const path = require('path')  // node自带库，解决路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './index.jsx',    // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),  // 打包输出路径
        filename: '[name].js'                   // 输出文件名
    },
    devtool: 'cheap-module-source-map',    // 配置调试用的源文件映射
    // 配置devServer
    devServer: { 
        contentBase: path.join(__dirname, 'dist'),  // 服务静态资源路径，配置为打包输出的路径
        port: 9000,     // 端口
        host: '0.0.0.0',// 配置host，0.0.0.0可以通过ip或localhost访问
    },
    module: {
        rules: [
            {
                test: /\.(c|le)ss$/,    // 过滤样式文件
                use: [ 
                'style-loader', 
                'css-loader', 
                'less-loader']
            },
            {
                test: /\.jsx?$/,        // 配置js和jsx的loader
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: [          // presets是babel插件的集合
                        '@babel/preset-env', 
                        '@babel/preset-react'
                        ],
                    plugins: [          // 支持类属性'='赋值插件
                        "@babel/plugin-proposal-class-properties"]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: path.join(__dirname, 'index.html')
        })
      ]
}

4.配置npm 脚本
打开最开始初始化生成的package.json文件，找到script属性，新增start，build命令。

{
    ...
    "script":{
        "start": "webpack-dev-server -w", 
        "build": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
    }
}




webpack --config path_to_.config.js 可以指定配置文件路径
webpack-dev-server -w   中w参数可以实时编译预览

webpack --config path_to_.config.js 可以指定配置文件路径
webpack-dev-server -w 中w参数可以实时编译预览

3.启动项目

所有配置完成后，就可以启动项目了

npm start       // 启动本地服务
npm run build   // 打包