前言：
構(gòu)建React項(xiàng)目的幾種方式：
- 構(gòu)建：create-react-app 快速腳手架
- 構(gòu)建：generator-react-webpack
- 構(gòu)建：webpack一步一步構(gòu)建
1）構(gòu)建：create-react-app 快速腳手架
FaceBook官方發(fā)布了一個(gè)無(wú)需配置的、用于快速構(gòu)建開(kāi)發(fā)環(huán)境的腳手架工具create-react-app迎卤。
creat-react-app優(yōu)點(diǎn)
- 無(wú)需配置：官方的配置堪稱(chēng)完美，幾乎不用你再配置任何東西吩跋，就可以上手開(kāi)發(fā)項(xiàng)目。
- 高集成性：集成了對(duì)React渔工，JSX锌钮，ES6和Flow的支持。
- 自帶服務(wù)：集成了開(kāi)發(fā)服務(wù)器涨缚，你可以實(shí)現(xiàn)開(kāi)發(fā)預(yù)覽一體化轧粟。
- 熱更新：保存自動(dòng)更新，讓你的開(kāi)發(fā)更簡(jiǎn)單脓魏。
- 全兼容性：自動(dòng)處理CSS的兼容問(wèn)題兰吟，無(wú)需添加-webkit前綴。
- 自動(dòng)發(fā)布：集成好了發(fā)布成品功能茂翔，編譯后直接發(fā)布混蔼，并且包含了sourcemaps功能。
create-react-app的安裝
npm install -g create-react-app # Windows
sudo npm install -g create-react-app # Linux
創(chuàng)建React項(xiàng)目
create-react-app my-appcd my-appnpm start
2）構(gòu)建：generator-react-webpack
npm install -g yo # 在全局安裝generator-react-webpack之前珊燎，先安裝yeoman
npm install -g generator-react-webpack
mkdir ``new``-react-democd ``new``-react-demoyo react-webpacknpm start
3）構(gòu)建：webpack一步一步構(gòu)建
安裝webpack
在安裝webpack之前惭嚣，我們先建立一個(gè)文件夾并進(jìn)入，當(dāng)然你可以用其他方法悔政，我這里就用命令了晚吞。
mkdir react-webpack
cd react-webpacknpm initnpm install --save-dev webpack
配置webpack.config.js
在項(xiàng)目根目錄建立webpack.config.js文件，這個(gè)文件是進(jìn)行webpack配置的谋国，先建立基本的入口和出口文件槽地。
var path =require(``'path'``);
module.exports = {
//入口文件
entry:``'./app/index.js'``,
//出口文件
output:{
filename:``'index.js'``,
path:path.resolve(__dirname,``'dist'``)
}
}
新建index.html文件，在根目錄新建index.html文件芦瘾，并引入webpack設(shè)置中的出口文件捌蚊，代碼如下。
<!DOCTYPE html>
<html lang=``"en"``>
<head>
<meta charset=``"UTF-8"``>
<meta name=``"viewport"` `content=``"width=device-width, initial-scale=1.0"``>
<meta http-equiv=``"X-UA-Compatible"` `content=``"ie=edge"``>
<title>React全家桶-jspang</title>
</head>
<body>
</body>
<!--引入出口文件-->
<script src=``"./dist/index.js"``></script>
</html>
測(cè)試webpack配置
通過(guò)上面的步驟近弟，配置好了wbpack缅糟，現(xiàn)在可以測(cè)試一下我們webpack配置是否有問(wèn)題。在路口文件中寫(xiě)入下面的代碼祷愉，并進(jìn)行打包測(cè)試窗宦。
/app/index.js文件
function component(){
var element = document.createElement(``'div'``);
element.innerHTML = (``'Hello JSPang'``);
return element;
}
document.body.appendChild(component());
這段代碼非常簡(jiǎn)單，不作過(guò)多的解釋二鳄。如果你對(duì)這個(gè)代碼看不懂迫摔，再去啃兩邊犀牛或者紅寶書(shū)泥从。
加入打包命令
打開(kāi)package.json文件句占，在scripts屬性中加入build命令。
"scripts": {
"build": "webpack"
},
在終端中輸入npm run build 躯嫉，就可以看到打包結(jié)果了纱烘。如果沒(méi)有出現(xiàn)錯(cuò)誤杨拐，在瀏覽器中打開(kāi)，可以看到我們的編寫(xiě)結(jié)果擂啥。到這部為止哄陶，我們正確安裝了webpack，并進(jìn)行了出入口的配置哺壶，也看到了webpack的輸出結(jié)果屋吨。
開(kāi)發(fā)服務(wù)器配置
你會(huì)很容易的發(fā)現(xiàn)，我們現(xiàn)在缺少一個(gè)實(shí)時(shí)更新的服務(wù)山宾，那動(dòng)手馬上配置一個(gè)至扰。
在命令行安裝webpack-dev-server,在終端中輸入下面的命令。
cnpm install --save-dev webpack-dev-server
安裝完成后资锰，配置webpack.config.js文件敢课。
devServer:{
contentBase`'./',
host:'localhost',
compress:true,
port:1717
}
配置好后再packeage.json里增加一個(gè)scripts命令，我們起名叫server绷杜。
"scripts": {
"build"``: "webpack",
"server": "webpack-dev-server --open"
},
這里的–open是直接打開(kāi)瀏覽器的意思直秆。這些都配置完成后，就可以在終端輸入npm run server 看到結(jié)果了鞭盟。
自動(dòng)刷新瀏覽器
在我們修改代碼時(shí)圾结，現(xiàn)在并不能自動(dòng)刷新瀏覽器，不會(huì)立即呈現(xiàn)我們編寫(xiě)的代碼結(jié)果齿诉，而時(shí)要再次npm run build才可以筝野。其實(shí)只要在出口文件配置中加一個(gè)publicPath:’temp/’,然后在index.html引入JS時(shí)寫(xiě)這個(gè)temp地址就可以實(shí)時(shí)預(yù)覽了。
output:{
filename`'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'temp/'
},
index.html文件引入JS
<script src="./temp/index.js"></script>
Babel安裝配置
在webpack中配置Babel需要先加入babel-loader鹃两，這里我們繼續(xù)使用npm來(lái)進(jìn)行安裝，但是我們一般還需要支持es2015和React舀凛，所以要安裝四個(gè)包俊扳。
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
這里安裝四個(gè)包的安裝，這個(gè)四個(gè)包不能省略猛遍。安裝后你會(huì)在package.json里看到這些包的版本馋记。
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
`"webpack":"^3.8.1",
"webpack-dev-server": "^2.9.3"
}
配置module
在安裝完成后，可以到webpack.config.js里配置module懊烤，也就是配置我們常說(shuō)的loader梯醒。
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: "babel-loader",
query: {
presets: [
'es2015', 'react'
]
}
}]
}
編寫(xiě)React
webpack通過(guò)上邊的步驟，基本已經(jīng)配置完成了腌紧，這里我們寫(xiě)一個(gè)React文件來(lái)進(jìn)行測(cè)試一下茸习。在進(jìn)行編寫(xiě)React文件前，要記得安裝React和React-dom這兩個(gè)包壁肋。
安裝React和React-dom
cnpm install --save react react-dom
安裝完成后号胚，我們改寫(xiě)app/index.js文件籽慢，把原來(lái)原生的JavaScript代碼改成React代碼。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello JSPang</div>,
document.getElementById("app")
);
因?yàn)樯线呂覀兗恿艘粋€(gè)app的選擇器猫胁，所以在index.html中增加一個(gè)div標(biāo)簽箱亿，并把id設(shè)置成app。
index.html
<div id="app"></div>
都配置完了弃秆，我們可以用之前配置好的npm run server 命令進(jìn)行預(yù)覽了届惋。如果在瀏覽器中看到了Hello JSPang 這段文字，說(shuō)明我們的配置成功了菠赚，以后就可以愉快的進(jìn)行開(kāi)發(fā)了脑豹。
總結(jié)：其實(shí)自己配置React開(kāi)發(fā)環(huán)境在實(shí)際工作中也并不多，因?yàn)槲覀兊呐渲卯吘共皇呛艹墒煨庵粒抑С州^少晨缴。這里學(xué)習(xí)只是為了你更好的掌握React構(gòu)建過(guò)程和設(shè)置參數(shù)，實(shí)際工作中盡量使用合適的腳手架工具峡捡。
轉(zhuǎn)載自：jspang.com/2017/10/22/react-all-01/
webpack.config.js的完整代碼
var path = require(
'path'
);
module.exports = {
// 入口文件
entry: './app/index.js',
// 服務(wù)器配置
devServer: {
contentBase: './',
host: 'localhost',
compress: true,
port: 1717
},
// 配置Babel
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: "babel-loader",
query: {
presets: [
'es2015',
'react'
]
}
}
]
},
// 出口文件
output: {
filename: 'index.js',
path: path.resolve(__dirname,
'dist'
),
publicPath: 'temp/'
}
}
轉(zhuǎn)載自：https://www.cnblogs.com/cina33blogs/p/9115294.html
