溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“如何快速創建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 .gitignore package.json README.md yarn.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相關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
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'
})
]
}{
"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”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
