快速创建React项目并配置webpack
更新时间：2022年01月13日 16:30:15 作者：罗毅豪
这篇文章主要介绍了创建React项目并配置webpack,在这里需要注意，Create React App requires Node 14 or higher.需要安装高版本的node，本文给大家介绍的非常详细，需要的朋友参考下吧
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.lock2.安装所需包
由于package.json里包含react和react-dom，已经默认安装了，我们安装UI框架ant design即可。
npm i --save antd
安装webpack的两个基本项
npm i webpack webpack-cli --save-dev
安装webpack
npm i -D webpack
安装webpack服务器 webpack-dev-server，让启动更方便
npm i --save-dev webpack-dev-server
自动创建html文件 html-webpack-plugin
npm i --save-dev html-webpack-plugin
清除无用文件 clean-webpack-plugin，将每次打包多余的文件删除
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.在项目根目录下执行
npm run dev
到此这篇关于创建React项目并配置webpack的文章就介绍到这了,更多相关创建React配置webpack内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React生命周期方法之componentDidMount的使用
这篇文章主要介绍了React生命周期方法之componentDidMount的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了详解React服务端渲染从入门到精通，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节,本文讲给大家介绍一下React项目中如何实现一个简单的锚点目录定位,文中有详细的实现代码,需要的朋友可以参考下2023-09-09
React Native模块之Permissions权限申请的实例相机
这篇文章主要介绍了React Native模块之Permissions权限申请的实例相机的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
本篇文章主要介绍了React-Native之定时器Timer的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了React中的生命周期和子组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了React为 Vue 引入容器组件和展示组件的教程详解，文中很详细的给大家介绍了使用容器组件的原因,需要的朋友可以参考下2018-05-05
详解如何在React中优雅的使用addEventListener
这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener，文中的示例代码简洁易懂，对大家学习React有一定的帮助，需要的可以参考一下2023-01-01
这篇文章主要为大家介绍了React 应用框架Dva数据流向原理总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了聊一聊我对 React Context 的理解以及应用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论