webpack React 构建项目
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