react脚手架添加webpack

最新推荐文章于 2024-01-20 21:59:15 发布

dhq_blog

最新推荐文章于 2024-01-20 21:59:15 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端

原文链接：https://www.jb51.net/article/234552.htm

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何从头开始创建一个React项目，包括安装create-react-app，配置Webpack，设置.babelrc文件，安装和配置所需的包如antd、webpack、webpack-dev-server等，以及编写webpack.config.js文件。同时，还涉及到修改package.json，public/index.html，src/index.js和src/App.js等关键文件。最后，通过npm run dev启动项目。

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

参考链接：https://www.jb51.net/article/234552.htm

1.快速创建React项目

npm install -g create-react-app // 全局安装create-react-app (只需要安装一次)

create-react-app demo // 创建项目

cd demo // 进入项目目录

注意，Create React App requires Node 14 or higher.需要安装高版本的node。

创建的项目目录结构

-Demo // 项目名

-node_modules // 存放第三方包

-public

-favicon.ico

-index.html

-manifest.json

-src // 页面代码都写在这下面

-App.css

-App.js

-App.test.js

-index.css

-index.js //项目入口

-logo.svg

-serviceWorker.js

-setupTest.js

.gitignore

package.json

README.md

yarn.lock

2.安装所需包

由于package.json里包含react和react-dom，已经默认安装了，我们安装UI框架ant design即可。

1	`npm i --save antd`

安装webpack的两个基本项

1	`npm i webpack webpack-cli --save-dev`

安装webpack

1	`npm i -D webpack`

安装webpack服务器 webpack-dev-server，让启动更方便

1	`npm i --save-dev webpack-dev-server`

自动创建html文件 html-webpack-plugin

1	`npm i --save-dev html-webpack-plugin`

清除无用文件 clean-webpack-plugin，将每次打包多余的文件删除

1	`npm i --save-dev clean-webpack-plugin`

样式编译loader插件

npm i --save-dev style-loader css-loader // css相关loader

npm i --save-dev node-sass sass-loader // scss 相关loader

npm i --save-dev file-loader url-loader // 加载其他文件，比如图片，字体

安装babel

npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

npm i --save @babel/polyfill

npm i --save-dev babel-loader

3.根目录创建webpack.config.js文件，代码如下

const path = require('path');

const webpack = require('webpack');

const HtmlPlugin = require('html-webpack-plugin');

module.exports = {

devtool: 'inline-source-map',

entry: {

index: './src/index.js'

},

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'build')

},

module: {

rules: [{

test: /\.css$/,

use: ['style-loader', 'css-loader']

}, {

test: /\.scss$/,

use: ['style-loader', 'css-loader', 'sass-loader']

}, {

test: /\.(png|svg|jpg|gif)$/,

loader: 'url-loader',

options: {

limit: 10000,

name: 'img/[name].[hash:7].[ext]'

}

}, {

test: /\.(js|jsx)$/,

use: 'babel-loader',

exclude: /node_modules/

}]

},

devServer: {

// contentBase: './build',

port: 8081, // 端口号

// inline: true,

hot: true

},

plugins: [

new webpack.HotModuleReplacementPlugin(),

new HtmlPlugin({

template: 'public/index.html'

})

]

}

4.在根目录下添加文件 .babelrc，代码如下

{

"presets": [

"@babel/preset-env",

"@babel/preset-react"

],

"plugins": [

"@babel/plugin-proposal-class-properties"

]

}

5.修改 package.json

"scripts": {

"start": "webpack-dev-server --open --mode production",

"watch": "webpack --watch",

"build": "webpack --mode production",

"dev": "webpack --mode development& webpack-dev-server --open --mode development",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

6.修改public/index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo</title>

</head>

<body>

<div id="root"></div>

</body>

</html>

7.修改src/index.js文件

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<App />,

document.getElementById('root')

);

8.修改src/App.js文件

import React, { Component } from 'react';

import './App.css'; // 引入样式文件

class App extends Component {

constructor(props) {

super(props);

this.state = {};

}

render() {

return (

<div className="main">

<div>我是首页</div>

</div>

);

}

export default App;

9.修改 src/App.css文件

.main {

background: darkgray;

width: 500px;

height: 500px;

margin: 0 auto;

}

10.在项目根目录下执行

1	`npm run dev`

react脚手架 添加webpack

1.快速创建React项目

2.安装所需包

3.根目录创建webpack.config.js文件，代码如下

4.在根目录下添加文件 .babelrc，代码如下

5.修改 package.json

6.修改public/index.html文件

7.修改src/index.js文件

8.修改src/App.js文件

9.修改 src/App.css文件

10.在项目根目录下执行

react脚手架添加webpack