前言：
構(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è)無需配置的、用于快速構(gòu)建開發(fā)環(huán)境的腳手架工具create-react-app。
creat-react-app優(yōu)點(diǎn)
- 無需配置：官方的配置堪稱完美，幾乎不用你再配置任何東西，就可以上手開發(fā)項(xiàng)目。
- 高集成性：集成了對(duì)React，JSX，ES6和Flow的支持。
- 自帶服務(wù)：集成了開發(fā)服務(wù)器，你可以實(shí)現(xiàn)開發(fā)預(yù)覽一體化。
- 熱更新：保存自動(dòng)更新，讓你的開發(fā)更簡單。
- 全兼容性：自動(dòng)處理CSS的兼容問題，無需添加-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>
測試webpack配置
通過上面的步驟，配置好了wbpack，現(xiàn)在可以測試一下我們webpack配置是否有問題。在路口文件中寫入下面的代碼，并進(jìn)行打包測試。
/app/index.js文件
function component(){
var element = document.createElement(``'div'``);
element.innerHTML = (``'Hello JSPang'``);
return element;
}
document.body.appendChild(component());
這段代碼非常簡單，不作過多的解釋。如果你對(duì)這個(gè)代碼看不懂，再去啃兩邊犀?；蛘呒t寶書。
加入打包命令
打開package.json文件，在scripts屬性中加入build命令。
"scripts": {
"build": "webpack"
},
在終端中輸入npm run build ，就可以看到打包結(jié)果了。如果沒有出現(xiàn)錯(cuò)誤，在瀏覽器中打開，可以看到我們的編寫結(jié)果。到這部為止，我們正確安裝了webpack，并進(jìn)行了出入口的配置，也看到了webpack的輸出結(jié)果。
開發(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是直接打開瀏覽器的意思。這些都配置完成后，就可以在終端輸入npm run server 看到結(jié)果了。
自動(dòng)刷新瀏覽器
在我們修改代碼時(shí)，現(xiàn)在并不能自動(dòng)刷新瀏覽器，不會(huì)立即呈現(xiàn)我們編寫的代碼結(jié)果，而時(shí)要再次npm run build才可以。其實(shí)只要在出口文件配置中加一個(gè)publicPath:’temp/’,然后在index.html引入JS時(shí)寫這個(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來進(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，也就是配置我們常說的loader。
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: "babel-loader",
query: {
presets: [
'es2015', 'react'
]
}
}]
}
編寫React
webpack通過上邊的步驟，基本已經(jīng)配置完成了，這里我們寫一個(gè)React文件來進(jìn)行測試一下。在進(jìn)行編寫React文件前，要記得安裝React和React-dom這兩個(gè)包。
安裝React和React-dom
cnpm install --save react react-dom
安裝完成后，我們改寫app/index.js文件，把原來原生的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 這段文字，說明我們的配置成功了，以后就可以愉快的進(jìn)行開發(fā)了。
總結(jié)：其實(shí)自己配置React開發(fā)環(huán)境在實(shí)際工作中也并不多，因?yàn)槲覀兊呐渲卯吘共皇呛艹墒欤抑С州^少。這里學(xué)習(xí)只是為了你更好的掌握React構(gòu)建過程和設(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
