本文小编为大家详细介绍“如何快速创建React项目并配置webpack”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何快速创建React项目并配置WEBpack”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。1
本文小编为大家详细介绍“如何快速创建React项目并配置webpack”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何快速创建React项目并配置WEBpack”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
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.gitignorepackage.jsonREADME.mdyarn.lock由于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相关loadernpm i --save-dev node-sass sass-loader // scss 相关loadernpm 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-propertiesnpm i --save @babel/polyfillnpm i --save-dev babel-loaderconst 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' }) ]}{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties" ]}"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"},<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div id="root"></div> </body></html>import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <App />, document.getElementById('root'));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;.main { background: darkgray; width: 500px; height: 500px; margin: 0 auto;}npm run dev读到这里，这篇“如何快速创建React项目并配置webpack”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。
--结束END--
本文标题: 如何快速创建React项目并配置webpack
本文链接: https://www.lsjlt.com/news/307033.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0