剛參與了一個(gè)從頭開始搭建的項(xiàng)目，整理一下前端從0到1搭建的基于webpack的react項(xiàng)目實(shí)踐焚刺。（不用腳手架的那種哦）
創(chuàng)建一個(gè)新的文件夾以項(xiàng)目名命名
mkdir xiaoming
cd xiaoming
添加 package.json
npm init
在你的項(xiàng)目目錄文件下運(yùn)行 npm init, 結(jié)果如下圖
按照提示輸入（一般情況都是回車處理）后輸入yes就會(huì)生成package.json文件了。package.json 是項(xiàng)目的核心文件，包含包依賴管理和腳本任務(wù)。
現(xiàn)在你的項(xiàng)目長(zhǎng)這個(gè)樣子
xiaoming
└ package.json
使用自己喜歡的編輯器打開當(dāng)前repo查看生成的package.json文件
安裝依賴包
按照我們的標(biāo)題來看至少有兩個(gè)最基本的依賴需要安裝：react和webpack伯病。
安裝react
安裝react, 還需要安裝react-dom，react 從 0.14 版本開始否过，將 react-dom 拆分出 react 包午笛，所以現(xiàn)在需要單獨(dú)安裝。
npm i --save react react-dom
安裝webpack
這里 webpack-cli 作為一個(gè)命令行工具苗桂，接收一些參數(shù)并用于 webpack 的編譯器药磺，webpack-dev-server 是一個(gè)基于 express 的開發(fā)服務(wù)器，還提供了 live reloading 的功能煤伟，在開發(fā)的時(shí)候使用它配置熱加載癌佩。
npm i --save-dev webpack webpack-cli webpack-dev-server
在命令行運(yùn)行上面兩條命令后，package.json發(fā)生了變化便锨。多了dependencies和devDependencies围辙。之后你安裝的所有依賴的名字和版本號(hào)都會(huì)出現(xiàn)在這個(gè)里面，便于管理放案。
安裝babel
通常我們?cè)趯憫?yīng)用的時(shí)候姚建，都會(huì)用到es6/7/8和jsx的一些語法，所以我們需要能夠編譯這些語法吱殉，就需要引入插件
npm i --save-dev babel-core babel-loader html-webpack-plugin
babel 插件是為了讓 webpack 能夠使用 babel 編譯 es6/7/8 和 jsx 的語法掸冤，而 html-webpack-plugin 會(huì)生成一個(gè) html 文件，它的內(nèi)容自動(dòng)引入了 webpack 產(chǎn)出的 bundle 文件友雳。
現(xiàn)在你的項(xiàng)目長(zhǎng)這個(gè)樣子
xiaoming
└ node_modules
└ package.json
└ package-lock.json
配置 webpack
首先你需要一個(gè)webpack.config.js稿湿，包含了你的webpack所有配置
- 在repo下新建webpack.config.js
- copy如下代碼進(jìn)webpack.config.js（關(guān)于webpack的配置網(wǎng)上一搜一大把，不贅述）
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
// 以哪個(gè)模塊為入口
index_bundle: './src/index.js',
},
output: {
// 打包好的文件存放在哪里沥阱，以及怎么命名
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
module: {
// 使用 babel-loader 編譯 es6/7/8 和 jsx 語法
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
// 指定自己的 html 文件模板缎罢，也可以指定生成的 html 的文件名
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
favicon: './src/favicon.ico',
}),
],
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
enforce: true,
chunks: 'all'
}
}
}
}
};
現(xiàn)在你的項(xiàng)目長(zhǎng)這個(gè)樣子
xiaoming
└ node_modules
└ package.json
└ package-lock.json
└ webpack.config.js
看起來差不多了，現(xiàn)在來寫react的hello world好了
- 新建src文件夾
- 在src中新建App.js, index.html, index.js文件(參見react官網(wǎng)hello world代碼部分)
xiaoming
└ node_modules
└ src
└ App.js
└ index.html
└ index.js
└ babel.config.js
└ package.json
└ package-lock.json
└ webpack.config.js
將package.json中的scripts添加一條命令：
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --open"
},
下圖是我完整的package.json文件考杉，僅供參考
{
"name": "xiaoming",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --open"
},
"author": "xueying",
"license": "ISC",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"redux": "^4.0.4"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-env": "^7.5.5",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
}
babel.config.js
module.exports = {
'presets': ['@babel/react','@babel/env'],
};
App.js
import React, {Component} from 'react';
class App extends Component {
render() {
return (
<div className='app'>
<h1>Hello world</h1>
</div>
);
}
}
export default App;
index.html
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Welcome to Xiaoming hotpot</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js
import React from 'react';
import {hydrate} from 'react-dom';
import App from './App';
hydrate(<App/>, document.getElementById('app'));
命令行運(yùn)行npm run start就可以啟動(dòng)你的demo，可以在瀏覽器中看見hello world了舰始。
周末閑來無事加上了前端項(xiàng)目docker化崇棠，讓其拿到repo后先執(zhí)行repo里的startLocal腳本啟動(dòng)docker，再在docker里運(yùn)行npm install等相關(guān)命令丸卷。目的主要是為了團(tuán)隊(duì)協(xié)作時(shí)防止每個(gè)人本地node版本不一致枕稀，install時(shí)改來改去，破壞環(huán)境。
創(chuàng)建docker-compose.yml
version: '2'
services:
nginx:
container_name: nginx
image: nginx:1.16.1-alpine
ports:
- '8080:8080'
volumes:
- ./nginx.conf:/etc/nginx/conf.d/default.conf
frontend:
container_name: frontend
image: node:10
ports:
- '3000:3000'
volumes:
- ./node_modules:/work/node_modules
- ./:/work
working_dir: '/work'
command: ["bash"]
stdin_open: true
tty: true
創(chuàng)建nginx.conf
server {
listen 8080;
charset utf-8;
server_name 0.0.0.0;
location / {
proxy_pass http://frontend:3000;
proxy_set_header Host $host;
}
location /api {
proxy_pass http://你的后端host/;
}
}
創(chuàng)建本地一鍵啟動(dòng)腳本 ./startLocal.sh
#!/usr/bin/env bash
docker-compose -f ./docker-compose.yml -p . up -d
docker exec -it frontend /bin/bash
docker-compose -f ./docker-compose.yml -p . down
一鍵啟動(dòng)步驟
git clone git@github.com:lixueying/react-with-webpack.git
cd react-with-webpack
./startLocal.sh
npm install （只在第一次進(jìn)入docker或者依賴有更新的時(shí)候使用）
npm start
repo下載之后就可以直接用了萎坷，不需要自己再去搭架子凹联，開箱即用。
附上React簡(jiǎn)易腳手架的GitHub地址：https://github.com/lixueying/react-with-webpack
