詳細解答Webpack+Babel+React環境搭建（詳細教學）
本篇文章主要介紹了詳解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(
如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下
如何解决iview 的select下拉框选项错位的问题，具体操作如下
以上是詳細解答Webpack+Babel+React環境搭建（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何利用React和WebSocket建立即時聊天應用
Sep 26, 2023 pm 07:46 PM
如何利用React和WebSocket建立即時聊天應用程式引言：隨著網路的快速發展，即時通訊越來越受到人們的關注。即時聊天應用程式已成為現代社交和工作生活中不可或缺的一部分。本文將介紹如何利用React和WebSocket建立一個簡單的即時聊天應用，並提供具體的程式碼範例。一、技術準備在開始建立即時聊天應用之前，我們需要準備以下技術和工具：React：一個用於構建
React前後端分離指南：如何實作前後端的解耦與獨立部署
Sep 28, 2023 am 10:48 AM
React前後端分離指南：如何實現前後端的解耦和獨立部署，需要具體程式碼範例在當今的Web開發環境中，前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開，可以讓開發工作更加靈活、高效，並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離，從而實現解耦和獨立部署的目標。首先，我們要先理解什麼是前後端分離。傳統的Web開發模式中，前端和後端是耦合在
如何利用React和Flask建構簡單易用的網路應用
Sep 27, 2023 am 11:09 AM
如何利用React和Flask建構簡單易用的網路應用引言：隨著網路的發展，網路應用的需求也越來越多樣化和複雜化。為了滿足使用者對於易用性和效能的要求，使用現代化的技術堆疊來建立網路應用變得越來越重要。 React和Flask是兩個在前端和後端開發中非常受歡迎的框架，它們可以很好的結合在一起，用來建立簡單易用的網路應用。本文將詳細介紹如何利用React和Flask
React響應式設計指南：如何實現自適應的前端佈局效果
Sep 26, 2023 am 11:34 AM
React響應式設計指南：如何實現自適應的前端佈局效果隨著行動裝置的普及和使用者對多螢幕體驗的需求增加，響應式設計成為了現代前端開發的重要考量之一。而React作為目前最受歡迎的前端框架之一，提供了豐富的工具和元件，能夠幫助開發人員實現自適應的佈局效果。本文將分享一些關於使用React實現響應式設計的指南和技巧，並提供具體的程式碼範例供參考。使用React的Fle
如何利用React和RabbitMQ建立可靠的訊息應用
Sep 28, 2023 pm 08:24 PM
如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言：現代化的應用程式需要支援可靠的訊息傳遞，以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫，用於建立使用者介面，而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用，並提供具體的程式碼範例。 RabbitMQ概述：
React程式碼偵錯指南：如何快速定位與解決前端bug
Sep 26, 2023 pm 02:25 PM
React程式碼偵錯指南：如何快速定位並解決前端bug引言：在開發React應用程式時，經常會遇到各種各樣的bug，這些bug可能會使應用程式崩潰或導致不正確的行為。因此，掌握調試技巧是每個React開發者必備的能力。本文將介紹一些定位和解決前端bug的實用技巧，並提供具體的程式碼範例，幫助讀者快速定位和解決React應用程式中的bug。一、調試工具的選擇：在Re
React Router使用指南：如何實現前端路由控制
Sep 29, 2023 pm 05:45 PM
ReactRouter使用指南：如何實現前端路由控制隨著單頁應用的流行，前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫，提供了豐富的功能和易用的API，使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法，並提供一些具體的程式碼範例。安裝ReactRouter首先，我們需要
如何利用React和Google BigQuery建立快速的資料分析應用
Sep 26, 2023 pm 06:12 PM
如何利用React和GoogleBigQuery建立快速的資料分析應用引言：在當今資訊爆炸的時代，資料分析已經成為了各產業中不可或缺的環節。而其中，建構快速、有效率的資料分析應用則成為了許多企業和個人追求的目標。本文將介紹如何利用React和GoogleBigQuery結合來建立快速的資料分析應用，並提供詳細的程式碼範例。一、概述React是用來構建
