本文主要介紹了詳解Webpack+Babel+React開發環境的搭建的方法步驟，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。
1.認識Webpack
構建應用程式前我們先來了解Webpack, Webpack是一個模組打包工具，能夠把各種檔案（例如：ReactJS、Babel 、Coffeescript、Less/Sass等）以模組編譯後進行打包。
2.安裝Webpack
要開始使用Webpack在專案中進行開發前我們首先需要在全域環境中安裝。
npm install webpack -g
登入後複製
3.建立專案
安裝好後建立一個名叫learn-webpack的專案並進入該專案文件夾，當然項目名字你可以取你自己想要的名字。
mkdir learn-webpack && cd learn-webpack
登入後複製
透過編輯器找到你剛剛建立的專案資料夾
現在我們來建立2個文件:
app.js
document.querySelector('#app').innerHTML = 'Hello World!';
登入後複製
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn-webpack</title>
</head>
<body>
<p id="app"></p>
<script src="dist/bundle.js"></script>
</body>
</html>
登入後複製
然後在終端執行
webpack ./app.js ./dist/bundle.js
#最後執行啟動本地的http服務
python -m SimpleHTTPServer
這時候你就可以在瀏覽器輸入:http://localhost:8000
如果你能在瀏覽器裡面看到Hello world!那說明你已經成功的利用Webpack把main.js打包並編譯到了bundle.js.是不是很簡單？
定義一個設定檔
上面的只是對Webpack的使用進行了一些簡單的介紹，實際上每個專案下都應該包含一個webpack.config. js，用來告訴Webpack需要做些什麼。
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
}
}登入後複製
現在在終端機中執行：webpack
#看看是不是跟之前輸入webpack ./app.js ./dist/bundle.js 的打包編譯結果一樣。
entry：指定打包的入口文件
1.單一文件打包為單一輸出文件，直接寫該文件的名字，例如：entry:"main.js "
2.多個檔案打包為單一輸出文件，將檔案名稱放進一個數組，例如：entry:['main.js','xx.js']
3 .多個文件打包為多個輸出文件，將文件名放入一個鍵字對，例如：entry: {a:'main.js',b:'xx.js'}
output：設定打包結果
path為定義輸出資料夾，filename為打包結果檔案的名稱，如果指定打包入口檔案為上面的1、2種情況，filename裡面直接跟你想輸出的檔名。若為第3種情況filename裡面需寫成[name].檔名.js，filename裡面的[name]為entry中的鍵。
監聽變化自動打包
當我們在不停的對程式碼進行變動的時候，為了不修改一次然後又手動去進行打包一次。可以使用webpack的watch功能。
webpack --watch 或webpack -w
或可以直接在設定碼裡面把watch設定為true
module.exports = {
entry: "app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
watch: true
}登入後複製
4.使用Babel
Babel是什麼？ Babel 是 JavaScript 編譯器。使用它可以將ES6的語法轉換為ES5的語法，以便在現在有的環境中執行。
在終端執行:npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev
執行安裝完成後需要將先前的webpack.config.js修改為:
module.exports = {
entry: "./app.js",
output: {
path: __dirname+"/dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['','.coffee','.js']
}
}登入後複製
現在就能在檔案裡面以ES6的語法進行程式碼編寫，我們來測試一下，在app.js加入:
var func = str => {
console.log(str);
};
func('我现在在使用Babel!');登入後複製
ES6支援用箭頭方式來定義函數，如果你能在控制台看到「我現在在使用Babel!」的列印文字，說明我們的Babel模組安裝成功，可以開始使用ES6進行程式碼編寫了。
loaders項目裡面表示用來載入這種類型的資源的loader。
test，是一段正規則，表示進行比對的資源型別。
exclude為指定應該被忽略的文件，我們在這裡指定了/node_modules/。
query有2種寫法, 一種是直接以字串形式跟在loader名後：
loader: 'babel-loader?presets[]=es2015
登入後複製
另一種如本文所示：
query: {
presets: ['es2015']
}登入後複製
resolve.extensions 用來指明程式自動補全識別哪些字尾,
注意一下, extensions 第一個是空字串!對應不需要後綴的情況.
5.結合React
#前面我們已經對Webpack和Babel進行了配置並做了一些介紹，基本的環境已經搭建好了，現在我們開始在使用React。
終端機輸入以下程式碼對react和react-dom進行安裝
npm install react react-dom --save
登入後複製
Babel针对React的所有的预设插件
npm install babel-preset-react --save-dev
登入後複製
由于我们增加了react的预设插件，所以需要对webpack.config.js进行修改。
将module -> loaders下面的query修改如下：
query: {
presets: ['es2015','react']
}登入後複製
现在创建一个名为hello.js的文件
import React from "react";
class Hello extends React.Component{
render() {
return (
<p>
Hello, World!
</p>
)
}
}
export default Hello;登入後複製
然后将app.js里面的文件修改如下：
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";
// var func = str => {
// console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector('#app').innerHTML = 'Hello World!';
ReactDOM.render(
,
document.querySelector('#app')
);登入後複製
如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。
相关推荐：
React Native 搭建开发环境详解
如何使用Docker部署PHP开发环境
详解php多人开发环境原理
以上是Webpack、Babel、React開發環境的搭建教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！
