快速創(chuàng)建React項目并配置webpack
1.快速創(chuàng)建React項目
npm install -g create-react-app // 全局安裝create-react-app (只需要安裝一次) create-react-app demo // 創(chuàng)建項目 cd demo // 進入項目目錄
注意,Create React App requires Node 14 or higher.需要安裝高版本的node。
創(chuàng)建的項目目錄結構
-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即可。
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
自動創(chuàng)建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.根目錄創(chuàng)建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.在項目根目錄下執(zhí)行
npm run dev
到此這篇關于創(chuàng)建React項目并配置webpack的文章就介紹到這了,更多相關創(chuàng)建React配置webpack內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
react的嚴格模式和解決react useEffect執(zhí)行兩次問題
文章總結:本文詳細探討了React中useEffect執(zhí)行兩次的問題,主要歸因于React的嚴格模式,嚴格模式在開發(fā)模式下會故意重復調用一些生命周期方法,以幫助開發(fā)者發(fā)現(xiàn)潛在的問題,包括不安全的生命周期、過時的ref API、廢棄的findDOMNode方法、意外的副作用等2025-01-01引入代碼檢查工具stylelint實戰(zhàn)問題經驗總結分享
eslint的配置引入比較簡單,網上有比較多的教程,而stylelint的教程大多語焉不詳。在這里,我會介紹一下我在引入stylelint所遇到的坑,以及解決方法2021-11-11React router cache route實現(xiàn)緩存頁面流程介紹
react-router自身沒有路由緩存的特性,在5.x版本之前,我們可以基于react-router-cache-route來實現(xiàn)路由緩存功能。但是react-router 6.x在實現(xiàn)上做了比較大的變化,react-router-cache-route沒有提供相應的支持2023-01-01Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能2024-10-10