参考链接:https://www.jb51.net/article/234552.htm
1.快速创建React项目
1 2 3 | npm install -g create-react-app // 全局安装create-react-app (只需要安装一次) create-react-app demo // 创建项目 cd demo // 进入项目目录 |
注意,Create React App requires Node 14 or higher.需要安装高版本的node。
创建的项目目录结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | -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即可。
安装webpack的两个基本项
1 | npm i webpack webpack-cli --save-dev |
安装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插件
1 2 3 | 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
1 2 3 | 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文件,代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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,代码如下
1 2 3 4 5 6 7 8 9 | { "presets" : [ "@babel/preset-env" , "@babel/preset-react" ], "plugins" : [ "@babel/plugin-proposal-class-properties" ] } |
5.修改 package.json
1 2 3 4 5 6 7 8 | "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文件
1 2 3 4 5 6 7 8 9 10 | <!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文件
1 2 3 4 5 6 7 8 | import React from 'react' ; import ReactDOM from 'react-dom' ; import App from './App' ; ReactDOM.render( <App />, document.getElementById( 'root' ) ); |
8.修改src/App.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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文件
1 2 3 4 5 6 | .main { background: darkgray; width: 500px; height: 500px; margin: 0 auto; } |
10.在项目根目录下执行