原文鏈接：https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
本文對原文進(jìn)行了粗略的翻譯~~旨在幫助剛?cè)腴T的新手迅速了解構(gòu)建一個基于webpack打包的react項目邓尤。
Project setup 配置項目
1.首先使用下面的命令來創(chuàng)建一個項目：
mkdir minimal-react-boilerplate
cd minimal-react-boilerplate
npm init -y
npm init 會生成一個package.json文件析蝴，-y命令則是所有的選項都用默認(rèn)選項.
2.創(chuàng)建一個分布式（泻轰？）文件夾腌零，該文件夾用來為單頁應(yīng)用（SPA）服務(wù)许饿，使得應(yīng)用可以在瀏覽器環(huán)境或者外部服務(wù)器被訪問到愕贡。該文件夾會包括兩個文件：一個html和一個js济舆，js會由webpack配置好的js資源來自動生成抵怎，你可以手動創(chuàng)建一個html文件作為應(yīng)用的入口浓恶。
注釋：這個html和js就是你程序發(fā)布的所有內(nèi)容了玫坛。
html的內(nèi)容如下所示：
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
說明兩點(diǎn)：
bundle.js會被webpack生成，
id=“app”會作為react根節(jié)點(diǎn)來找到入口的標(biāo)識包晰。
接下來要做的就是把所有的資源文件打包成一個bundle.js湿镀，創(chuàng)建一個根組件將id=“app”作為文件的入口
Webpack Setup 配置webpack
使用webpack來打包炕吸，為了能在localhost環(huán)境訪問到，并在瀏覽器里開發(fā)勉痴，需要同時安裝webpack-dev-server赫模，才能啟動服務(wù)器。
npm install --save-dev webpack webpack-dev-server
現(xiàn)在你應(yīng)該有node_modules文件夾蒸矛，這里你可以看到你安裝的第三方依賴嘴瓤，因為使用了--save-dev，這些依賴會被寫在package.json文件中莉钙。
接下來在package.json中配置webpack-dev-server的運(yùn)行
"scripts":{
"start":"webpack-dev-server --progress --colors --hot --config ./webpack.config.js",
...
},
這個運(yùn)行腳本定義了你需要使用一些基本的配置來使用webpack-dev-server,需要創(chuàng)建配置文件webpack.config.js
module.exports = {
entry: ['./src/index.js'],
output: {
path:__dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
簡單的說這個配置文件做了三件事：
1.我們使用src/index.js來做為打包的入口文件
2.打包后的文件是bundle.js
3.bundle.js生成在dist文件夾下廓脆，dist文件夾被用來啟動我們的app
我們的項目里還少了一個src/index.js文件，因為它是我們的entry文件么~remember
在src/index.js中輸入
The Minimal React Webpack Babel Setup
現(xiàn)在你的項目結(jié)構(gòu)是這樣的
- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js
接下來就可以運(yùn)行你的webpack-dev-server了磁玉，
通過當(dāng)前目錄下（你項目所在的目錄）啟動命令行 停忿，運(yùn)行項目
npm start
就可以看到項目已經(jīng)運(yùn)行成功了，這時候在瀏覽器中鍵入你的localhost地址蚊伞，如圖中席赂，我的運(yùn)行端口是8081；(一般情況是8080时迫，當(dāng)被占用時會往后增加)
http://localhost:8081就可以在瀏覽器的控制臺console.log()中看到你寫入的文字了~
現(xiàn)在你通過webpack來運(yùn)行了你的項目颅停，把你的入口文件src/index.js打包成了bundle.js，然后將它引入到了dist/index.html掠拳，最后你就可以在console.log中看到你想要的結(jié)果了癞揉。
雖然目前只有src/index.js被打包了，但是你肯定會在index.js中引入更多的js溺欧，這些都會被webpack自動打包到bundle.js中喊熟。贊不贊？
Hot Reloading 熱加載
react-hot-loader是非常值得推薦給你的姐刁，它會大大縮短你開發(fā)到看到效果的時間芥牌，簡單的說，熱加載的作用就是當(dāng)你修改了一部分源代碼聂使，這個變化會立刻表現(xiàn)在瀏覽器上壁拉，而無需通過你刷新整個頁面。
在根目錄安裝
npm install --save-dev react-hot-loader
提示：在命令行柏靶，按control+c可以取消npm start的運(yùn)行弃理，然后安裝完成后需要再次運(yùn)行npm start
想要熱加載生效，我們還需要在webpack.config.js這個配置文件增加一些配置宿礁。
module.exports = {
entry: [
'webpack-dev-server?http://localhost:8081', // 你的應(yīng)該是8080
'webpack/hot/only-dev-server',
'./src/index.js',
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
}
同時在src/index.js文件里還需定義熱加載是可以使用的并且需要被使用案铺。
src/index.js文件的內(nèi)容：
console.log('My Minimal React Webpack Babel Setup');
module.hot.accept();
重新跑一下npm start蔬芥，webpack的配置文件修改了是需要重新啟動的梆靖。
運(yùn)行后你又可以在瀏覽器的控制臺里看到console.log()的內(nèi)容了控汉，同時還能看到一些與熱加載有關(guān)的打印，不用去看它們返吻。先來試試我們的熱加載好了沒姑子，當(dāng)你修改你的console.log()內(nèi)容后，保存测僵，看看瀏覽器是不是自己更新了街佑，恭喜~~
到這里webpack的基本配置已經(jīng)好了，但是還少了一個重要的模塊——Babel
Babel Setup 配置babel
Babel可以使你盡情的使用es6的語法捍靠，使用Babel你的代碼會被編譯成es5沐旨，這樣的話所有的瀏覽器，可能只支持部分的es6榨婆，也可以支持你的代碼磁携。Babel甚至還允許你使用比es6還先進(jìn)的語法下一代eses7
打開命令行，讓我們趕緊使用吧
npm install --save-dev babel-core babel-loader babel-preset-es2015
此外你可能還想使用一些在試驗階段的es6特性（比如對象擴(kuò)展符{...}）良风，這些可以通過stages來激活谊迄。不用擔(dān)心它的穩(wěn)定性，因為已經(jīng)被Facebook用來在create-react-app中使用了烟央。
怎么使用stages?
npm install --save-dev babel-preset-stage-2
最后一步统诺，鑒于你是要用react的，你需要多一些配置來把react的jsx文件轉(zhuǎn)換成js文件疑俭，這是為了方便粮呢。
npm install --save-dev babel-preset-react
現(xiàn)在所有的node包都已經(jīng)安裝到位，你接下來還需修改一下package.json和webpack.config.js文件钞艇，這些變化包括你所有安裝的包鬼贱。
package.json中
...
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"devDependencies": {
...
webpack.config.js中
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
對module模塊中的loaders是個數(shù)組，表示不同的加載器香璃，test是要匹配的文件后綴為.jsx这难，exclude是把node_modules排除在外。具體內(nèi)容本篇文件并未詳述葡秒。
在此時運(yùn)行npm start 將會報錯姻乓，因為你的應(yīng)用還不識別react。
因為我們馬上就要進(jìn)行第一個react組件的開發(fā)了眯牧，讓我們來修復(fù)下~
React Setup 使用React
為了使用react蹋岩，你還需要安裝兩個node包，react和react-dom学少，這兩個安裝完后npm start 也不會報錯了
npm install --save react react-dom
然后在src/index.js中編寫你的鏈接react的第一個組件吧
src/index.js中
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'My Minimal React Webpack Babel Setup';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);
module.hot.accept();
到今天剪个，不得不說這篇文章已經(jīng)過時了，因為react和各種node包的版本更新速度太快版确，這個項目已經(jīng)跑不起來扣囊，如果非要跑起來乎折，可以安裝歷史版本
npm install react-hot-loader@1.3.1 --save-dev
npm install react@15.3.0 --save-dev
npm install react-dom@15.0.2 --save-dev
所以從今天開始還是要多寫博客，多總結(jié)侵歇，以后再回頭看骂澄，自己應(yīng)該有了長足的進(jìn)步吧，以前寫的文章該有多~~
到這里惕虑，打開瀏覽器應(yīng)該就可以看到頁面上輸出了內(nèi)容坟冲，而不是再在控制臺上了
至此，一個迷你型的react項目就搭建完成了溃蔫。
