React提供了create-react-app的快速構(gòu)建工具, 但面對(duì)復(fù)雜的項(xiàng)目, 入門級(jí)的構(gòu)建工具, 是遠(yuǎn)遠(yuǎn)不夠的, 我們這里從零開始, 用webpack, 手動(dòng)配置一個(gè)獨(dú)立的React開發(fā)環(huán)境, 開發(fā)環(huán)境完成后, 支持自動(dòng)構(gòu)建, 自動(dòng)刷新, sass語(yǔ)法 等功能...
1.安裝webpack
在安裝webpack之前吩案，我們先建立一個(gè)文件夾并進(jìn)入肥败，當(dāng)然你可以用其他方法，我這里就用命令了翠霍。
mkdir react-webpack //創(chuàng)建一個(gè)react-webpack文件夾
cd react-webpack //切換到react-webpack文件夾內(nèi)
進(jìn)入文件夾后對(duì)我們的webpack項(xiàng)目進(jìn)行初始化儒老。命令如下：
npm n init
初始化成功后可以在項(xiàng)目根目錄下看到package.json文件。如果你一路按回車感覺(jué)有些麻煩，你可以直接加一個(gè)-y參數(shù)吆鹤，這樣npm就直接給我們生成了。
npm n init -y
package.json文件建立好以后洲守，你可以安裝webpack了
npm install --save-dev webpack //在該項(xiàng)目里面安裝webpack
npm install -g webpack //全局進(jìn)行安裝webpack
建議使用cnpm來(lái)進(jìn)行安裝疑务，這樣速度會(huì)快很多。安裝好后梗醇，你會(huì)在package.json里看到你安裝的版本號(hào)知允。
檢測(cè)webpack是否安裝成：
node_modules/.bin/webpack -v //當(dāng)前項(xiàng)目安裝檢測(cè)
webpack -v //全局安裝檢測(cè)
安裝相關(guān)軟件包
npm install react react-dom 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
- 在根目錄下新建文件夾dist, 在src內(nèi)加入main.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 = {
// 開發(fā)模式
mode: 'development',
// 配置入口文件
entry: './src/index.js',
// 配置出口文件
output: {
path: path.resolve(__dirname, 'dist'), //文件所在目錄
filename: 'main.js' //文件名稱
},
// 配置開發(fā)服務(wù)器, 并配置自動(dòng)刷新
devServer: {
// 根目錄下dist為基本目錄
contentBase: path.join(__dirname, 'dist'),
// 設(shè)置是否自動(dòng)壓縮
compress: true,
// 服務(wù)端口為1208（可隨意設(shè)置，但不要跟其他項(xiàng)目的相同）
port: 1208,
// 是否自動(dòng)打開瀏覽器
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>webpack_react 配置練習(xí)</title>
</head>
<body>
webpack_react 配置練習(xí)
<hr>
我的react顯示頁(yè)面
</body>
</html>
在終端中輸入npm run dev 叙谨，就可以看到打包結(jié)果了温鸽。如果沒(méi)有出現(xiàn)錯(cuò)誤，瀏覽器會(huì)自動(dòng)打開手负，可以看到我們的編寫結(jié)果涤垫。到這步為止，我們正確安裝了webpack虫溜，并進(jìn)行了出入口的配置雹姊，也看到了webpack的輸出結(jié)果。
3. 添加對(duì)js高級(jí)語(yǔ)法的支持
接下來(lái)我們配置babel對(duì)es6語(yǔ)法的支持, 以及對(duì)jsx語(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>webpack_react 配置練習(xí)</title>
</head>
<body>
webpack_react 配置練習(xí)
<hr>
我的react顯示頁(yè)面
<hr>
<div id="app"></div>
</body>
</html>
在src/index.js中加入包含jsx語(yǔ)法的react組件
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>顯示內(nèi)容</div>,
document.getElementById("app")
);
在終端運(yùn)行npm run dev便可以查看到app里面的內(nèi)容
3. 添加對(duì)sass衡楞、css語(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|css$/, //scss和css文件匹配
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;
}
#app {
div {
font-size: px2rem(500);
display: flex;
color: #64B587;
input {
flex: 1 1 auto;
}
span {
flex: 1 1 auto;
text-align: center;
}
}
}
在index.js中新增import index.scss即可
