搭建react專案
1.開啟新建的專案空資料夾，終端輸入命令：npm init，資料夾生成package.json檔案；
2.安裝webpack、webpack-cli和cross-env：npm install webpack webpack-cli cross-env --save-dev；
3.在根目錄下新建src資料夾，資料夾下新建index.js檔案，作為被編譯檔案webpack及webpack的入口檔案；
4.在根目錄下新建webpack.config.js檔案作為webpack核心配置檔案；
5.在webpack.config.js檔案新增如下程式碼：
const path = require('path')
const isLocal
6.在index.js檔案新增如下程式碼：
function sum (a, b) { return a + b; } var result = sum (12, 23); console.log(result);
7.在package.json的script屬性下新增如下行：
"build": "cross-env LOCAL=false webpack"
8.終端輸入命令：npm run build，執行成功且根目錄出現dist資料夾並且有打包出的bundle.js檔案，說明打包配置成功；
9.開始做高階語法轉換為ES5的配置，先安裝相關外掛：npm install babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/polyfill @babel/runtime @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import --save-dev；
10.根目錄下新建babel.config.js檔案，新增如下配置，或者直接寫在webpack.config.js檔案內：
const babelConfig = { // 相當於plugins的一個集合，即外掛集，就不需要在plugins中一個個外掛的配置了 presets: [ [ '@babel/preset-env', { useBuiltIns: 'entry', // 如果引入了@babel/polyfill，這個屬性可以使@babel/polyfill按需引入 corejs: 2, }, ], '@babel/preset-react', ], plugins: ["@babel/plugin-syntax-dynamic-import", ["@babel/plugin-transform-runtime"]], // @babel/runtime中的外掛 } module.exports = babelConfig
11.回到webpack.config.js內新增日下babel配置，如下：
const path = require('path')
const isLocal = process.env.LOCAL === 'true'
module.exports = {
mode: isLocal ? 'production' : 'development', // 表示webpack打包環境是開發環境還是生產環境
entry: './src/index.js', // 專案的入口檔案，路徑相對於專案的根路徑
// 配置輸出資訊
output: {
filename: 'bundle.js', // 打包輸出檔名，後期可改成按規則動態生成
path: path.resolve(__dirname, './dist'), // 輸出的路徑，路徑是當前目錄
},
module: {
rules: [
{
// 配置babel-loader
test: /\.js/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, './src'),
}
]
}
}
12.將index.js檔案內函式改為箭頭函式並新增Promise，儲存後再次打包，能夠正常打包並將轉換後代碼儲存到bundle.js，代表babel配置成功；
13.css前處理器轉換配置，先安裝相關外掛：npm install stylus stylus-loader less less-loader sass-loader node-sass css-loader style-loader --save-dev，並新增如下配置：
const path = require('path')
const isLocal = process.env.LOCAL === 'true'
module.exports = {
mode: isLocal ? 'production' : 'development', // 表示webpack打包環境是開發環境還是生產環境
entry: './src/index.js', // 專案的入口檔案，路徑相對於專案的根路徑
// 配置輸出資訊
output: {
filename: 'bundle.js', // 打包輸出檔名，後期可改成按規則動態生成
path: path.resolve(__dirname, './dist'), // 輸出的路徑，路徑是當前目錄
},
module: {
rules: [
{
// 配置babel-loader
test: /\.js/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, './src'),
},
// 版本不同，寫法也不同
{
test: /\.(less)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
plugins: [require('autoprefixer')],
},
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
}
]
}
}
14.src目錄新增index.less檔案，寫入如下程式碼：
@color: green; h { color: @color; }
15.index.js檔案引入樣式檔案，重新打包，可以看到新寫的樣式檔案被打包進bundle.js檔案；
16.配置處理靜態資原始檔，安裝相關外掛：npm install file-loader url-loader --save-dev，並新增如下配置：
const path = require('path')
const isLocal = process.env.LOCAL === 'true'
module.exports = {
mode: isLocal ? 'production' : 'development', // 表示webpack打包環境是開發環境還是生產環境
entry: './src/index.js', // 專案的入口檔案，路徑相對於專案的根路徑
// 配置輸出資訊
output: {
filename: 'bundle.js', // 打包輸出檔名，後期可改成按規則動態生成
path: path.resolve(__dirname, './dist'), // 輸出的路徑，路徑是當前目錄
},
module: {
rules: [
{
// 配置babel-loader
test: /\.js/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, './src'),
},
// 版本不同，寫法也不同
{
test: /\.(less)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
plugins: [require('autoprefixer')],
},
},
},
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
{
test: /\.(jpg|png|jpeg|gif)$/,
use: [
// file-loader打包的圖片或檔案會生成一個隨機的hash值作為圖片名字，url-loader封裝了file-loader，檔案大小小於limit，url-loader會把檔案轉為base64,大於limit則呼叫file-loader進行處理，引數也會直接傳給file-loader
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]',
},
},
},
},
],
},
{
test: /\.(mp4|webm|ogg|mp3|wav)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
},
},
],
}
]
}
}
17.src資料夾內新建asset資料夾並新增兩張圖片，在index.js引入兩張圖片，儲存後重新打包，可以看到圖片也被打包到dist資料夾的img資料夾內，檔名為上述options屬性配置的name；
18.抽離公共程式碼，在webpack.config.js內新增如下配置：
optimization: { splitChunks: { cacheGroups: { // 打包公共模組 commons: { chunks: 'initial', // initial表示提取入口檔案的公共部分 minChunks: 2, // 表示提取公共部分最少的檔案數 minSize: 0, // 表示提取公共部分最小的大小 name: 'commons', // 提取出來的檔案命名 }, }, }, }
19.新增檔案別名、副檔名配置，在webpack.config.js內新增如下配置：
resolve: { extensions: ['.js', '.jsx', '.json'], alias: { pages: path.join(__dirname, './src/pages'), components: path.join(__dirname, './src/components'), actions: path.join(__dirname, './src/redux/actions'), reducers: path.join(__dirname, './src/redux/reducers'), images: path.join(__dirname, './src/images'), }, }
20.配置檔案熱更新，安裝相關外掛：npm install webpack-dev-server html-webpack-plugin --save-dev，並在webpack.config.js內新增如下配置：
引入外掛：
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
// 例項化Html模板
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'),
}),
],
devServer: { hot: true, open: true, port: 8080, static: './dist', historyApiFallback: true, // 解決啟動後重新整理404
}
21.在package.json檔案新增如下行：
"dev": "cross-env LOCAL=true webpack-dev-server"
終端執行命令：npm run dev，瀏覽器自動開啟http://localhost:8080頁面，修改index.js檔案頁面會跟著改動，熱更新配置成功；
22.清理上一次打包記錄和結果，安裝外掛：npm install clean-webpack-plugin --save-dev，並進行如下配置：
引入外掛：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [ new CleanWebpackPlugin(), //例項化clean-webpack-plugin外掛 new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../index.html') }) ]
23.整合react，安裝相關外掛：npm install react react-dom --save-dev，npm install react-router-dom --save-dev；
24.引入antd design，安裝相關外掛：npm install antd --save-dev；
25.新增express和axios，打通前後端，安裝外掛：npm install express axios --save-dev，根目錄新增server.js檔案，新增如下程式碼：
const express = require('express')
const app = express()
app.get('/api/xxx', (req, res) => {
res.header('Access-Control-Allow-Origin', '*')
res.send({
name: 'xxxxxx',
comurl: 'baidu.com',
})
})
app.listen(3000, () => {
console.log('app listen 3000 port')
})
26.終端輸入命令：node server.js執行檔案，在瀏覽器開啟連結：http://localhost:3000/api/xxx，可以看見server檔案裡面寫的測試資料；
27.以下命令可以呼叫這個介面獲取到返回的資料：
axios.get('http://localhost:3000/api/xxx').then(res => {
console.log(res)
})
28.請求介面遇到跨域問題需要新增跨域配置，在webpack.config.js內新增如下配置：
devServer: { hot: true, open: true, port: 8080, static: './dist', historyApiFallback: true, // 解決啟動後重新整理404 proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '/api', }, changeOrigin: true, // 讓target引數是域名 secure: false,// 設定支援https協議代理 }, } }
完