React ： WEBPACK-优快云博客

本文链接：https://blog.youkuaiyun.com/BLUEsang/article/details/107410669

本文详细介绍如何使用npm初始化并构建一个基本的React应用程序，包括环境搭建、依赖安装、路由配置及Webpack集成。

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

在这里插入图片描述

npm start

初始化npm

npm init

设置开发环境

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

设置文件布局

在这里插入图片描述

Build a Basic React App

index.html
root的位置是index.js插入的位置；

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

App.js
设置link和route；
调用各个component；

import React , {Component} from 'react';
import {Link, Route} from 'react-router-dom';
import Users from './containers/Users';
import Pizza from './containers/Pizza';
import asyncComponent from './hoc/asyncComponent';

const AsyncPizza = asyncComponent(()=>{         //传入无名函数+内部动态import——lazyloading
    return import('./containers/Pizza');
})

class App extends Component {
    render(){
        return (
            <div>
                <div>
                    <Link to='/'>Users</Link> |
                    <Link to='/pizza'>Pizza</Link>
                </div>
                <div>
            <Route path="/" exact component={Users}/>
            <Route path="/pizza" exact component={asyncComponent(AsyncPizza)}/>
                </div>
            </div>
        )
    }
}

index.js
将app插入root位置；
设置browerrouter等route参数；
将app打包；

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from 'react-router-dom';
import './index.css';
import App from './App';

const app = (
    <BrowserRouter>
        <App />
    </BrowserRouter>
)

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

Install dependencies

npm install --save react react-dom react-router-dom

保存在package中，这样npm install 就会自动下载这些环境；

npm insall --save webpack-cli

在package中的scripts中添加start：
在这里插入图片描述
此时webpackage无法理解index.js的内容，需要创建webpack.config.js；

webpack.config.js

https://webpack.js.org/

const path = require('path');

module.exports={
    mode:'development',
    entry: './src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:''
    },
    devtool:'cheap-module-eval-source-map'
};

Adding filerules & babel (for javascript)

https://babeljs.io/

 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-stage-2 babel-loader @babel/plugin-proposal-class-properties

webpack.config.js

const path = require('path');

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

.babekrc

{
    "presets":[
        ["@babel/preset-env",{
            "targets":{
                "browsers":[">1 1%","last 2 versions"]
            }
        }],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]

}

css loader for css files

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

$ npm install --save-dev postcss-loader

package.js

  "browserlist":">1 1%, last 2 versions",

webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');

module.exports={
    mode:'development',
    entry: './src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:''
    },
    devtool:'cheap-module-eval-source-map',
    module:{
        rules:[
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude: /node_modules/
            },
            {
                test:/\.css$/,
                exclude: /node_modules/,
                use:[
                    {loader:'style-loader'},
                    {loader:'css-loader', options:{
                        importLoaders:1,
                        modules:{
                            localIdentName: '[name]__[local]__[hash:base64:5]'
                        }
                    }},
                    {loader:'postcss-loader' , options:{
                        ident:'postcss',
                        plugins:()=>[autoprefixer()]
                    }}
                ]
            }
        ]
        }
    };

.babelrc

{
    "presets":[
        ["@babel/preset-env",{
            "targets":{
                "browsers":[">1 1%","last 2 versions"]
            }
        }],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]

}

image lodaer

$ npm install --save-dev url-loader

npm install --save-dev html-webpack-plugin

$ npm install --save-dev file-loader