基于 webpack 的 React 项目搭建

淡淡的烟草味﹌ 2023-02-28 01:50 25阅读 0赞

如果是个人练习项目，可以考虑使用 Webpack 搭建项目，这样也可以了解 Webpack，如果是正规项目，推荐使用 Create-React-App 搭建项目（其本身就是Webpack）

**项目创建**

创建一个文件夹，进入该目录，在该目录下打开一个终端，

执行npm init。根据提示输入内容，也可以直接按回车键跳过。执行完后目录中会多一个package.json文件

**修改package.json**

"scripts": \{

"test": "echo \\"Error: no test specified\\" && exit 1",

"start": "node\_modules/.bin/webpack"

\},

**安装react, react-dom, webpack**

在项目根目录下执行下面命令，其中--save的含义是项目上线运行所需的包，即生产环境（--save-dev是开发环境所需的包）。

npm install react react-dom --save  
npm install webpack webpack-cli --save-dev

**引入Babel库进行转码**

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

配置Babel，创建一个名为.babelrc 文件在根项目文件夹中：

\{

"presets": \["@babel/preset-env", "@babel/preset-react"\]

\}

**安装html-webpack-plugin插件**

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

**webpack.config.js文件配置（**根项目文件夹**）**

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

module.exports = \{

devtool: 'eval-source-map',

entry:  \_\_dirname + "/src/App.jsx",

output: \{

path: \_\_dirname + "/build",

filename: "index.js"

\},

module: \{

rules: \[

\{

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

use: \{

loader: 'babel-loader'

\},

exclude: /node\_modules/

\}

\]

\},

plugins: \[

new HtmlWebpackPlugin(\{

filename: \_\_dirname + '/build/Index.html'

\})

\]

\}

**在src文件夹下创建App.jsx文件**

import React, \{ Component \} from 'react';

import ReactDOM from 'react-dom';

class App extends React.Component\{

render()\{

return (<h1>holle world</h1>);

\}

\}

ReactDOM.render(

<App />,

document.body);

**运行如下命令**

npm start

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 [cesium] 基于Webpack的Cesium项目搭建

装 1.下载nodejs并安装：[http://nodejs.cn/download/][http_nodejs.cn_download] 2. cesium - w...

╰半橙微兮°/ 2024年04月18日 19:42/ 0 赞/ 122 阅读

相关搭建typescript_React、TypeScript、Webpack项目搭建（二）

![64c374fa-452e-eb11-8da9-e4434bdf6706.png][] 源码地址：react-typescript 本节将做以下改动 1. 删除

Love The Way You Lie/ 2023年10月05日 16:52/ 0 赞/ 64 阅读

相关通过webpack从零开始搭建React项目

从零开始搭建React项目 1. Webpack基础概念 webpack主要作用：代码转换：TypeScript 编译成 JavaScript、SCSS

╰半夏微凉°/ 2023年06月13日 06:23/ 0 赞/ 60 阅读

相关基于 Create-React-App 的 React项目搭建

脚手架搭建 React 构建项目 \ 全局安装脚手架 npm install -g create-react-app \ 使用脚手架构建一个名为my-app的Rea

╰半夏微凉°/ 2023年02月28日 01:51/ 0 赞/ 13 阅读

相关基于 webpack 的 React 项目搭建

如果是个人练习项目，可以考虑使用 Webpack 搭建项目，这样也可以了解 Webpack，如果是正规项目，推荐使用 Create-React-App 搭建项目（其本身就是We

淡淡的烟草味﹌/ 2023年02月28日 01:50/ 0 赞/ 26 阅读

相关 Webpack搭建React开发环境

1、React环境搭建实现React开发的三种方式：（1）使用CDN的方式 <script src="https://unpkg.com/react@

一时失言乱红尘/ 2022年12月18日 10:58/ 0 赞/ 240 阅读

相关 webpack 搭建 React 项目

使用 webpack 打包 React 项目根据官方文档上面说你的机器上安装的 Node >= 8.10 和 npm >= 5.6 1 . 所以第一步检查自己的

- 日理万妓/ 2022年12月09日 02:46/ 0 赞/ 289 阅读

相关基于Webpack搭建React开发环境

1.创建项目文件夹 mkdir study-demo cd study-demo 2.并初始化package.json npm init 运行

待我称王封你为后i/ 2022年01月12日 09:53/ 0 赞/ 389 阅读

相关 react系列（12）React+Webpack的组合搭建

React是纯View层，但在最新的React V16版本中，按传统的纯js脚本开发已经不能适应项目的需要，配合Webpack打包，可以够更便捷地管理项目和更新插件；再者，使用

柔情只为你懂/ 2021年09月14日 10:28/ 0 赞/ 321 阅读

相关 webpack3 搭建react环境

在之前的服务器基础上,实际上是webpack+es6+react才是react环境安装react环境 1、安装 cnpm

约定不等于承诺〃/ 2021年07月24日 17:55/ 0 赞/ 498 阅读