react+webpack入門指南

前言


這是一篇關(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ǔ)工程驱入。

推薦下面文章:

React+Webpack快速上手指南

很不錯的文章,以下是我個人學(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)


A2FE9CA5-5EAE-4086-9C86-B2D12EB2724F.png

創(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)建src目錄
    • 創(chuàng)建app.js

創(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

在老版本中救崔,不知道什么那個版本以前惶看,reactreact-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)教程纸淮,謝謝!

我的相關(guān)react-native項目

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末绘面,一起剝皮案震驚了整個濱河市欺税,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌揭璃,老刑警劉巖晚凿,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異瘦馍,居然都是意外死亡歼秽,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門情组,熙熙樓的掌柜王于貴愁眉苦臉地迎上來燥筷,“玉大人,你說我怎么就攤上這事院崇∷撩ィ” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵底瓣,是天一觀的道長谢揪。 經(jīng)常有香客問我,道長捐凭,這世上最難降的妖魔是什么拨扶? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮茁肠,結(jié)果婚禮上患民,老公的妹妹穿的比我還像新娘。我一直安慰自己官套,他們只是感情好酒奶,可當(dāng)我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布蚁孔。 她就那樣靜靜地躺著,像睡著了一般惋嚎。 火紅的嫁衣襯著肌膚如雪杠氢。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天另伍,我揣著相機(jī)與錄音鼻百,去河邊找鬼。 笑死摆尝,一個胖子當(dāng)著我的面吹牛温艇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播堕汞,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼勺爱,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了讯检?” 一聲冷哼從身側(cè)響起琐鲁,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎人灼,沒想到半個月后围段,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡投放,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年奈泪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灸芳。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡涝桅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出耗绿,到底是詐尸還是另有隱情苹支,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布误阻,位于F島的核電站债蜜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏究反。R本人自食惡果不足惜寻定,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望精耐。 院中可真熱鬧狼速,春花似錦、人聲如沸卦停。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至僵芹,卻和暖如春处硬,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背拇派。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工荷辕, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人件豌。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓疮方,卻偏偏與公主長得像,于是被迫代替她去往敵國和親茧彤。 傳聞我的和親對象是個殘疾皇子骡显,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看棘街,也希望更多的人看到...
    小小字符閱讀 8,164評論 7 35
  • 最近在學(xué)習(xí) Webpack,網(wǎng)上大多數(shù)入門教程都是基于 Webpack 1.x 版本的,我學(xué)習(xí) Webpack 的...
    My_Oh_My閱讀 8,184評論 40 247
  • GitChat技術(shù)雜談 前言 本文較長蟆盐,為了節(jié)省你的閱讀時間,在文前列寫作思路如下: 什么是 webpack遭殉,它要...
    蕭玄辭閱讀 12,691評論 7 110
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,286評論 4 31
  • 三月 街上走過少男少女的愛情 他們的懵懂和憧憬 是暖陽下含苞待放的蓓蕾 三月 蜜蜂嗡嗡飛舞 他們到處沾花惹草 尋找...
    嗨一休閱讀 263評論 0 1