溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關(guān)怎么在webpack中手動(dòng)配置React開(kāi)發(fā)環(huán)境，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。
1. 首先用npm初始化環(huán)境
mkdir react-webpack-demo cd react-webpack-demo npm init -y
安裝相關(guān)軟件包
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin -D npm install babel-core babel-loader babel-plugin-transform-runtime -D npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D # 識(shí)別html轉(zhuǎn)換為jsx語(yǔ)法 npm install babel-preset-react -D
2.添加對(duì)html靜態(tài)文件的支持
在根目錄下新建文件夾src, 在src內(nèi)加入index.html index.js
在根目錄下新建webpack.config.js
在webpack.config.js中加入如下配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 負(fù)責(zé)將html文檔虛擬到根目錄下
let htmlWebpackPlugin = new HtmlWebpackPlugin({
// 虛擬的html文件名 index.html
filename: 'index.html',
// 虛擬html的模板為 src下的index.html
template: path.resolve(__dirname, './src/index.html')
})
module.exports = {
// 開(kāi)發(fā)模式
mode: 'development',
// 配置入口文件
entry: './src/index.js',
// 出口文件目錄為根目錄下dist, 輸出的文件名為main
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
// 配置開(kāi)發(fā)服務(wù)器, 并配置自動(dòng)刷新
devServer: {
// 根目錄下dist為基本目錄
contentBase: path.join(__dirname, 'dist'),
// 自動(dòng)壓縮代碼
compress: true,
// 服務(wù)端口為1208
port: 1208,
// 自動(dòng)打開(kāi)瀏覽器
open: true
},
// 裝載虛擬目錄插件
plugins: [htmlWebpackPlugin],
}在package.json內(nèi)scripts中添加"dev": "webpack-dev-server"
在src/index.html中添加內(nèi)容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react-webpack-demo</title> </head> <body> react-webpack-demo <hr> 高堂明鏡悲白發(fā), 朝如青絲暮成雪 </body> </html>
在命令行內(nèi)運(yùn)行npm run dev, 即可看到剛添加的index.html內(nèi)容
接下來(lái)我們配置babel對(duì)es6語(yǔ)法的支持, 以及對(duì)jsx語(yǔ)法的支持
3. 添加對(duì)js高級(jí)語(yǔ)法的支持
在項(xiàng)目根目錄, 添加.babelrc配置文件 presets為語(yǔ)法配置,plugins為插件配置
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}在webpack.config.js中添加module字段, 進(jìn)行插件loader配置
// webpack.config.js
module.exports = {
...
// 配置loader
module: {
// 根據(jù)文件后綴匹配規(guī)則
rules: [
// 配置js/jsx語(yǔ)法解析
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
};在src/index.html中加入id為root的div節(jié)點(diǎn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react-webpack-demo</title> </head> <body> react-webpack-demo <hr> 高堂明鏡悲白發(fā), 朝如青絲暮成雪 <hr> <div id="root"></div> </body> </html>
在src/index.js中加入包含jsx語(yǔ)法的react組件
import React from 'react';
import ReactDOM from 'react-dom';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { number: 0 };
this.decrease = this.decrease.bind(this);
this.increase = this.increase.bind(this);
}
// 加1
increase() {
let self = this;
self.setState({ number: self.state.number + 1 })
}
// 減一
decrease() {
let self = this;
self.setState({ number: self.state.number - 1 })
}
render() {
return (
<div>
<input type = "button" value = "減1"onClick = { this.decrease }/>
<span> { this.state.number } </span>
<input type = "button" value = "加1" onClick = { this.increase }/>
</div> )
}
}
ReactDOM.render(<Counter /> , document.getElementById('root'))附錄: 添加對(duì)sass語(yǔ)法的支持(沒(méi)興趣可以跳過(guò))
安裝sass相關(guān)的loader
npm install style-loader css-loader node-sass sass-loader -D
在webpack.config.js內(nèi)新增規(guī)則
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
}
};在src內(nèi)新增index.scss
$designWidth: 750;
@function px2rem($px) {
@return $px*10/$designWidth + rem;
}
#root {
div {
font-size: px2rem(500);
display: flex;
color: #64B587;
input {
flex: 1 1 auto;
}
span {
flex: 1 1 auto;
text-align: center;
}
}
}以上就是怎么在webpack中手動(dòng)配置React開(kāi)發(fā)環(huán)境，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼