前言
這是一篇關(guān)于react+webpack基礎(chǔ)的入門指南
react是目前火的不行的前端web技術(shù)框架,webpack也是在項目開發(fā)中用的較多的構(gòu)建，打包，編譯工具了；當(dāng)然還有g(shù)ulp，grunt等等。如果想學(xué)習(xí)react
如果不想使用webpack，推薦大家使用facebook官方構(gòu)建工具create-react-app來創(chuàng)建React基礎(chǔ)工程。
推薦下面文章：
很不錯的文章,以下是我個人學(xué)習(xí)的過程和踩坑記錄
開發(fā)環(huán)境
- node / npm
- webstorm / atom(github官方強(qiáng)烈推薦的編譯工具---萬能神器)
node
建議鏡像切換到taobao提供的；這里不再贅述。
webstorm / atom
webstorm是JetBrain產(chǎn)品，該公司的產(chǎn)品很不錯包括Idea等。
重點說一下atom，這是github推出的，內(nèi)置git，還有很多插件提供，無論你想使用它開發(fā)web，android，iOS，node，python等都可以找到滿意的插件提高開發(fā)的效率，這簡直是一款吊到爆的開發(fā)工具。本教程src是采用atom構(gòu)建并完成
atom的下載地址:atom
目錄結(jié)構(gòu)
創(chuàng)建project
首先創(chuàng)建一個文件夾名字test01
cd 到 test01
terminal執(zhí)行 npm init 輸入命令后，終端會問一系列的問題，如果不需要在npm中發(fā)布你的模塊，一路回車默認(rèn)即可（注意：name需要小寫）；
然后你會發(fā)現(xiàn)根目錄多了一個package.json 這是項目核心文件，包括包管理依賴關(guān)系，需要執(zhí)行的腳本任務(wù)；例如 java中maven的pom.xml， iOS中cocoapod的podfile， android中g(shù)radle的build.gradle
為創(chuàng)建webpack配置做準(zhǔn)備
- 創(chuàng)建
build目錄- 創(chuàng)建
index.html文件 - 創(chuàng)建
build.js文件 不需要編寫任何內(nèi)容(編譯后的瀏覽器識別的js)
- 創(chuàng)建
- 創(chuàng)建
src目錄- 創(chuàng)建
app.js
- 創(chuàng)建
創(chuàng)建index.html
index.html源文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>react-webpack</title>
</head>
<body>
<div id='app'>
/* react DOM*/
</div>
<script src="bundle.js"></script>
</body>
</html>
安裝 react, react-dom
npm install react,react-dom --save
在老版本中，不知道什么那個版本以前，react與react-dom是一個庫，后來分開了，所以需要安裝2個庫，這是我曾經(jīng)踩的坑
app.js源代碼：
(采用es6)，不懂es6的可以先去學(xué)習(xí)一下
import React from 'react'
import ReactDom from 'react-dom'
//用ReactDom 渲染 到 index.html <div id='app'></div>
//
ReactDom.render(<h1>hello react</h1>,document.getElementById("app"))
安裝webpack
采用局部安裝webpack
npm install webpack --save
當(dāng)然可以全局--安裝(在任何目錄下都可以使用webpack命令，當(dāng)然前提是webpack構(gòu)建的項目了，不然的話會報錯)
npm install -g webpack
然后創(chuàng)建webpack.config.js
var path = require('path')
module.exports = {
//__dirname 是全局一個變量 當(dāng)前根目錄
entry: path.resolve(__dirname, './src/app.js'), // 需要編譯的入口文件
// 輸入編譯后的文件到build目錄的bundle.js
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
}
};
entry:指定了webpack的入口程序,從這里編譯，構(gòu)建應(yīng)用程序
output:輸入編譯后的文件到build目錄的bundle.js
這是可以執(zhí)行webpack 命令編譯構(gòu)建項目，會報錯，這是必然的
報錯內(nèi)容:
ERROR in ./src/app.js
Module parse failed: /Users/liushuo/Desktop/test/src/app.js Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| import ReactDom from 'react-dom'
|
| ReactDom.render(<h1/>,document.getElementById("app"))
重點
假如app.js文件沒有任何內(nèi)容就不會報錯，可以嘗試一下哦
會報錯是因為我們使用了react，react是使用jsx語法的實現(xiàn)，jsx是不能被瀏覽器識別的和執(zhí)行的。解決方案-引入需要的庫Babel
安裝并配置
npm insatll babel-core babel-loader babel-preset-es2015 babel-preset-react --save
其實Babel是語法轉(zhuǎn)化器
Babel在舊版本中是一個模塊，新版本中功能分開了，babel-core是核心的功能
babel-loader:babel加載器
babel-preset-es2015:es6轉(zhuǎn)化成es5 為了兼容個別瀏覽器可以正常使用
babel-preset-react:jsx->js
Babel其實可以完全在webpack.config.js中進(jìn)行配置
但是考慮到babel具有非常多的配置選項，在單一的webpack.config.js文件中進(jìn)行配置往往使得這個文件顯得太復(fù)雜，因此一些開發(fā)者支持把babel的配置選項放在一個單獨的名為 ".babelrc" 的配置文件中。
我們現(xiàn)在的babel的配置并不算復(fù)雜，不過之后我們會再加一些東西，因此現(xiàn)在我們就提取出相關(guān)部分，分兩個配置文件進(jìn)行配置（webpack會自動調(diào)用.babelrc里的babel配置選項），如下：
webpack.config.js配置loades
var path = require('path')
module.exports = {
//__dirname 是全局一個變量 當(dāng)前根目錄
entry: path.resolve(__dirname, './src/app.js'), // 需要編譯的入口文件
// 輸入編譯后的文件到build目錄的bundle.js
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,//一個匹配loaders所處理的文件的拓展名的正則表達(dá)式，這里用來匹配js和jsx文件（必須）
exclude: /node_modules/,//屏蔽不需要處理的文件（文件夾）（可選）
loader: 'babel-loader'//loader的名稱（必須是全稱，簡單的一個babel會報錯）
}
]
}
};
再次執(zhí)行webpack，就不會報錯了，ok你已經(jīng)成功了一步。
還記得上面提到的package.json可以定義執(zhí)行腳本嗎?
在scripts加入內(nèi)容
"scripts": {
"build": "webpack",
},
執(zhí)行 npm run build 和 執(zhí)行webpack是一樣的，這就是我們自己定義的npm執(zhí)行的腳本任務(wù)
然后使用瀏覽器打開index.html， 就會看到hello react;
然后修改app.js h1標(biāo)簽的內(nèi)容 刷新瀏覽器 ，你會發(fā)現(xiàn)沒有任何變化，因為這是你修改的內(nèi)容沒有重新編譯，
在termianal重新執(zhí)行npm run build,刷新瀏覽器，這時候修改的內(nèi)容出現(xiàn)了。
每次修改都要去手動構(gòu)建編譯，不覺得很麻煩嗎？
這樣的話，和以前刀耕火種的web前段時代有什么區(qū)別呢？
所以我們需要引入webpack-dev-server
配置 webpack-dev-server
安裝webpack-dev-server
npm install webpack-dev-server --save
簡單來說，webpack-dev-server就是一個小型的靜態(tài)文件服務(wù)器。使用它，可以為webpack打包生成的資源文件提供Web服務(wù)。那么，它能給開發(fā)帶來什么便利呢？
第一 支持自動刷新
第二 支持Hot Module Replacement，即模塊熱替換，在前端代碼變動的時候無需整個刷新頁面，只把變化的部分替換掉。使用HMR功能也有兩種方式：命令行方式和Node.js API。
這樣我們通過配置 webpack devServer 實現(xiàn)代碼自動編譯和瀏覽器自動刷新
注意:
var path = require("path")
var webpack = require('webpack')
module.exports = {
//入口
entry:['webpack/hot/dev-server',path.resolve(__dirname,'./src/app.js')],
//編譯到的目標(biāo)
output: {
path: path.resolve(__dirname,'./build'),
filename: 'bundle.js',
},
//webpack-dev-server配置
devServer: {
contentBase: './build',//默認(rèn)webpack-dev-server會為根文件夾提供本地服務(wù)器，如果想為另外一個目錄下的文件提供本地服務(wù)器，應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到"build"目錄）
historyApiFallback: true,//在開發(fā)單頁應(yīng)用時非常有用，它依賴于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html
inline: true,//設(shè)置為true，當(dāng)源文件改變時會自動刷新頁面
port: 8082,//設(shè)置默認(rèn)監(jiān)聽端口，如果省略，默認(rèn)為"8080"
},
devtool: 'eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin()//熱模塊替換插件
],
module: {
loaders: [
{
test: /\.(js|jsx)$/,//一個匹配loaders所處理的文件的拓展名的正則表達(dá)式，這里用來匹配js和jsx文件（必須）
exclude: /node_modules/,//屏蔽不需要處理的文件（文件夾）（可選）
loader: 'babel-loader'//loader的名稱（必須）
}]
}
}
然后在package.json scripts加入 "dev":"webpack-dev-server"
scripts:{
"dev":"webpack-dev-server",
"run":"webpack"
}
執(zhí)行npm run dev 沒有報報錯就說明啟動成功了
這是打開http://localhost:8082 就可以看到與之前的頁面一樣了，然后修改app.js ,h1內(nèi)容， terminal會自動編譯，然后瀏覽器會自動刷新頁面。大功告成！
本編文章只是初步介紹react-webpack的入門，后面我還會抽空更新react/react-nativ的相關(guān)教程，謝謝！
