介紹
本項(xiàng)目主要搭建一個項(xiàng)目 可以讓項(xiàng)目跑起來
用到了react琐凭，react-dom小腊，antd, babel,以及跑起來需要用到的一些loader等等
后邊的文章會有怎么使用antd 路由跳轉(zhuǎn)等等
寫到前面
如果你想快速構(gòu)建項(xiàng)目可以試試下方操作:
npm install -g create-react-app // 全局安裝create-react-app (只需要安裝一次)
create-react-app demo-app // 創(chuàng)建項(xiàng)目
cd demo-app // 進(jìn)入項(xiàng)目目錄
以下是webpack配置步驟
項(xiàng)目結(jié)構(gòu)
建立文件目錄結(jié)構(gòu)
- test //我的目錄名字
- src // 應(yīng)用的所有代碼
- actions // 處理異步請求
- assets // 靜態(tài)資源
- components // 公用組件
- pages // 業(yè)務(wù)邏輯頁面
- reducers // reducer 狀態(tài)處理
- util // 公用方法
- App.js // 相當(dāng)于Vue中的app.vue文件
- index.html // 項(xiàng)目模板
- index.html // 項(xiàng)目模板
- index.js // 項(xiàng)目入口文件 相當(dāng)于Vue中的main.js
- webpack.config.js // webpack 配置文件
初始化項(xiàng)目
在項(xiàng)目的根目錄下打開命令行怜械，輸入：
npm init -y 項(xiàng)目初始化, 生成 `package.json` 文件
安裝webpack的包
npm i webpack webpack-cli webpack-command --save-dev
這里直接將webpack 的三個基本項(xiàng)安裝好
--save-dev與--save的區(qū)別
--save-dev表示只是在編譯過程中所依賴的包，例如：webpack、sass-loader等 最后在package.json的devDependencies部分顯示
--save 表示編譯后在運(yùn)行時還需要依賴的包，例如 react react-dom等 最后在package.json的dependencies部分顯示
指定安裝webpack的版本
npm install --save-dev webpack@[version] //version代表版本號
webpack 服務(wù)器 webpack-dev-server,讓啟動更方便
npm i --save-dev webpack-dev-server
安裝其他webpack的插件
自動創(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相關(guān)loader
npm i --save-dev node-sass sass-loader // scss 相關(guān)loader
npm i --save-dev file-loader url-loader // 加載其他文件脑又，比如圖片，字體
根目錄創(chuàng)建webpack.config.js文件,里面代碼如下
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');//自動創(chuàng)建html文件
const CleanWebpackPlugin = require('clean-webpack-plugin');//清除多余文件
module.exports = {
devtool: 'cheap-module-eval-source-map',// 用于開發(fā)調(diào)試锐借，方便清楚是那個文件出錯 (共有7種)
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js', // 輸出的文件名
path: path.resolve(__dirname, 'dist') //
},
module: {
rules: [{
//轉(zhuǎn)換css文件
test: /\.css$/,
use:"style-loader!css-loader"
}, {
//轉(zhuǎn)換scss文件
test: /\.scss$/,
use:["style-loader","css-loader","sass-loader"]
// 加載時順序從右向左
},
{
// 轉(zhuǎn)換文件png|svg|jpg|gif
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}]
},
// 開啟一個虛擬服務(wù)器
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
//每次編譯都會把dist下的文件清除问麸，我們可以在合適的時候打開這行代碼，例如我們打包的時候钞翔，開發(fā)過程中這段代碼關(guān)閉比較好
new CleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
//使用一個模板
template: 'src/index.html'
})
]
};
完善修改 package.json
"scripts": {
"watch": "webpack --watch",
"build": "webpack --mode production",
"dev": "webpack --mode development& webpack-dev-server --open --mode development",
"start": "webpack-dev-server --open --mode production"
},
--open為自動打開瀏覽器
編寫index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.js文件
console.log('hi')
運(yùn)行
npm run dev
可能會出現(xiàn)的錯誤以及解決方法
運(yùn)行后可能會遇到以下錯誤信息
可能遇到的問題.png
解決辦法
注釋以下紅框中的內(nèi)容 等到后邊的react相關(guān)的包安裝好了之后再打開
解決方法.jpg
在項(xiàng)目中運(yùn)用React
安裝react 的東西,以及antd
npm i --save react react-dom antd
安裝一些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
修改webpack.config.js配置
在rules中加入：
//這個是為了轉(zhuǎn)換js
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
最終的配置文件完整代碼為：
const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
// const nodeExternals = require('webpack-node-externals');
module.exports = {
devtool: 'inline-source-map',
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
loader:['style-loader', 'css-loader']
}, {
test: /\.scss$/,
loader: ['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)$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
devServer: {
contentBase: './build',
port: 8081,
inline: true,
hot: true
},
// externals: [nodeExternals()],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlPlugin({
template: 'src/index.html'
})
]
}
配置babel,在根目錄下添加文件 .babelrc
文件里面完整代碼為:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
]
}
編寫App.js文件
import React,{Component} from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div className="main">
<p>Hello World</p>
<div className="box">我是第二個div</div>
</div>
);
}
}
export default App;
// ReactDom.render(<App />,document.getElementById('root'));
根目錄創(chuàng)建App.scss文件严卖，并編寫App.scss
.main {
background: pink;
width: 300px;
height: 300px;
margin: 0 auto;
.box {
background:skyblue;
}
}
將樣式文件引入App.js
import './App.scss'
編寫index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// import axios from 'axios'
// axios.defaults.baseURL = 'http://44454.cn';
ReactDOM.render(
<App />,
document.getElementById('root')
);
啟動項(xiàng)目
npm run dev
如果在這過程中有出現(xiàn)其他的報(bào)錯信息，百度都可以找到答案布轿！也可以參考下方代碼鏈接哮笆，對比有哪些不一樣的地方
https://github.com/menglin1997/react-demo
啟動后如圖所示：
樣式.jpg
路由配置參考網(wǎng)址
https://reacttraining.com/react-router/web/guides/quick-start
