webpack React 构建项目

最新推荐文章于 2024-08-25 23:10:32 发布

moso1

最新推荐文章于 2024-08-25 23:10:32 发布

阅读量315

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/moso1/article/details/106807018

版权

本文详细介绍了如何从零开始搭建React项目，通过安装Nodejs、创建目录、配置Webpack、安装Babel、React及相关插件，一步步构建React应用。重点讲述了Webpack配置过程，包括html-webpack-plugin、babel的配置，以及webpack-dev-server的使用，最后通过package.json启动项目。

摘要由CSDN通过智能技术生成

1.安装Nodejs 下载安装nodejs到系统环境

nodejs 直接下载当前页面的版本即可。

2.创建目录及项目初始化这里拿mac举例命令行输入下面指令

 mkdir my-react-app
 cd my-react-app
 mkdir src
 npm init -y

3.安装webpack 依赖,方便之后通过webpack打包生成项目

npm i webpack webpack-cli --save-dev

–save-dev 和 --save的区别，一般来说使用–save-dev参数安装的npm包在最终打包的时候不会被包括到源码里去，所以类似bebel和webpack这种进行项目工程构建或者代码编译的库应该用–save-dev来安装，而–save则是安装代码运行必须的库，比如react等。

4.安装babel

babel主要用于 ES的兼容

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

@babel/core是babel的核心库，@babel/preset-env 高版本ES兼容低版本ES，@babel/preset-react 识别JSX语法，babel-loader 具有很多格式转换的功能

5.配置babel

根目录my-react-app下新建 .babelrc 文件
添加配置

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

6.新建主页面相关文件

my-react-app 根目录的 src 目录下
新建: index.html 、App.js、 main.js 三个文件
index.html是主页样式
App.js 是一个组件
main.js 程序入口文件

7.安装 html-webpack-plugin、html-loader

根目录命令行下

npm i html-webpack-plugin html-loader --save-dev

html-webpack-plugin 主要用于:
1.为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。
2.单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

8.配置 webpack.config.js

根目录my-react-app下新建 webpack.config.js 文件
添加配置

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output:{
   filename: 'bundle.js',
   path: path.resovle(__dirname,'disk')
  },
  module:{
    rules:[
      {
        test: \/.js$\,
        exclude: "/node_module/",
        use:{
           loader: "babel-loader"
        }
      },
      {
        test: \/.html$\,
        exclude: "/node_module/",
        use:{
           loader: "html-loader"
        }
      }
    ]
  },
  plugins:[
   new HtmlWebPackPlugin({
     title:'The World of React-App',
     filename:'index.html',
     template:'./src/index.html'
   })
  ]
}

9.安装 React、ReactDom

npm i react react-dom --save

10.编写index.html、main.js、App.js文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

main.js

import React from "react"
import ReactDom from "react-dom"
import App from "./App.js"

ReactDom.render(<App />,document.getElementById("app"));

App.js

//这里用 16.8及以上的React版本 Hook的写法
import React,{useState,useEffect} from "react"

export default function mainApp(){
    const [title,setTitleName] = useState('React 创建成功')

    return (
      <div>
        <h2>{title}</h2>
      </div>
    )
}

11.安装 webpack-dev-server

npm i webpack-dev-server --save-dev

webpack-dev-server 用来启动一个本地服务，来预览页面效果

12.配置 package.json

在根目录 package.json 中添加配置

"scripts":{
 "start":"webpack-dev-server --open --mode --development"
}

13.运行项目

npm run start