前言
這是一篇關(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的配置選項放在一個單獨(dú)的名為 ".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)教程纸淮,謝謝!