React | 使用webpack構(gòu)建React項(xiàng)目

配置 React 項(xiàng)目酷宵,需要完成的工作:

1或粮、編譯 jsx,es6,scss 等資源

2幽歼、自動(dòng)引入靜態(tài)資源到 html 頁面

3朵锣、實(shí)時(shí)編譯和刷新瀏覽器

4、按指定模塊化規(guī)范自動(dòng)包裝模塊

5甸私、自動(dòng)給 css 添加瀏覽器內(nèi)核前綴

6诚些、按需打包合并 js、css


根據(jù) webpack 文檔編寫最基本的 webpack 配置,直接使用 node api 的方式

/* webpack.config.js */

varwebpack= require('webpack');

//輔助函數(shù)?varutils= require('./utils');

varfullPath=utils.fullPath;

varpickFiles=utils.pickFiles;

//項(xiàng)目根路徑?varROOT_PATH=fullPath('../');

//項(xiàng)目源碼路徑?varSRC_PATH=ROOT_PATH+'/src';

//產(chǎn)出路徑?varDIST_PATH=ROOT_PATH+'/dist';

//是否是開發(fā)環(huán)境?var__DEV__= process.env.NODE_ENV!=='production';

// conf

varalias=pickFiles({

id:/(conf\/[^\/]+).js$/,

pattern:SRC_PATH+'/conf/*.js'

});

// components

alias= Object.assign(alias,pickFiles({

id:/(components\/[^\/]+)/,

pattern:SRC_PATH+'/components/*/index.js'

}));

// reducers

alias= Object.assign(alias,pickFiles({

id:/(reducers\/[^\/]+).js/,

pattern:SRC_PATH+'/js/reducers/*'

}));

// actions

alias= Object.assign(alias,pickFiles({

id:/(actions\/[^\/]+).js/,

pattern:SRC_PATH+'/js/actions/*'

}));

varconfig= {

context:SRC_PATH,

entry: {

app: ['./pages/app.js']

},

output: {

path:DIST_PATH,

filename:'js/bundle.js'

},

module: {},

resolve: {

alias:alias

},

plugins: [

newwebpack.DefinePlugin({

// http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack

"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||'development')

})

]

};

module.

exports=config;

/* webpack.dev.js */

varwebpack= require('webpack');

varWebpackDevServer= require('webpack-dev-server');

varconfig= require('./webpack.config');

varutils= require('./utils');

varPORT=8080;

varHOST=utils.getIP();

varargs= process.argv;

varhot=args.indexOf('--hot') > -1;

vardeploy=args.indexOf('--deploy') > -1;

//本地環(huán)境靜態(tài)資源路徑?varlocalPublicPath='http://'+HOST+':'+PORT+'/';

config.output.publicPath=localPublicPath;

config.entry.app.unshift('webpack-dev-server/client?'+localPublicPath);

newWebpackDevServer(webpack(config), {

hot:hot,

inline:true,

compress:true,

stats: {

chunks:false,

children:false,

colors:true

},

// Set this as true if you want to access dev server from arbitrary url.

// This is handy if you are using a html5 router.

historyApiFallback:true,

}).listen(

PORT,HOST,function() {

console.log(localPublicPath);

});


編譯 jsx诬烹、es6砸烦、scss 等資源:

● 使用 bael 和 babel-loader 編譯 jsx、es6

● 安裝插件: babel-preset-es2015 用于解析 es6

● 安裝插件:babel-preset-react 用于解析 jsx


// 首先需要安裝 babel

$ npm i babel-core

// 安裝插件

$ npm i babel-preset-es2015babel-preset-react

// 安裝 loader

$ npm i babel-loader

在項(xiàng)目根目錄創(chuàng)建 .babelrc 文件:

{

"presets": ["es2015","react"]

}

在 webpack.config.js 里添加:

//使用緩存varCACHE_PATH= ROOT_PATH +'/cache';

// loaders

config.module.loaders= [];

//使用babel編譯jsx绞吁、es6

config.module.loaders.push({

test:/\.js$/,

exclude:/node_modules/,

include: SRC_PATH,

//這里使用?loaders幢痘,因?yàn)楹竺孢€需要添加?loader

loaders: ['babel?cacheDirectory='+CACHE_PATH]

});

接下來使用 sass-loader 編譯 sass:

$ npm i sass-loader node-sasscss-loader style-loader

●css-loader 用于將 css 當(dāng)做模塊一樣來 import

●style-loader 用于自動(dòng)將 css 添加到頁面

在 webpack.config.js 里添加:

//編譯?sass

config.module.loaders.push({

test:/\.(scss|css)$/,

loaders: ['style','css','sass']

});

自動(dòng)引入靜態(tài)資源到相應(yīng) html 頁面

● 使用 html-webpack-plugin

$ npm i html-webpack-plugin

在 webpack.config.js 里添加:

// html?頁面?varHtmlwebpackPlugin= require('html-webpack-plugin');

config.

plugins.push(

newHtmlwebpackPlugin({

filename:'index.html',

chunks: ['app'],

template: SRC_PATH +'/pages/app.html'

})

);

打包合并 js、css

webpack 默認(rèn)將所有模塊都打包成一個(gè) bundle家破,并提供了 Code Splitting 功能便于我們按需拆分颜说。在這個(gè)例子里我們把框架和庫都拆分出來:

在 webpack.config.js 添加:

config.entry.lib= [

'react','react-dom','react-router',

'redux','react-redux','redux-thunk'

]

config.output.filename='js/[name].js';

config.

plugins.push(

newwebpack.optimize.CommonsChunkPlugin('lib','js/lib.js')

);

//別忘了將?lib?添加到?html?頁面

// chunks: ['app', 'lib']

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市汰聋,隨后出現(xiàn)的幾起案子门粪,更是在濱河造成了極大的恐慌,老刑警劉巖马僻,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件庄拇,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡韭邓,警方通過查閱死者的電腦和手機(jī)措近,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來女淑,“玉大人瞭郑,你說我怎么就攤上這事⊙寄悖” “怎么了屈张?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)袱巨。 經(jīng)常有香客問我阁谆,道長(zhǎng),這世上最難降的妖魔是什么愉老? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任场绿,我火速辦了婚禮,結(jié)果婚禮上嫉入,老公的妹妹穿的比我還像新娘焰盗。我一直安慰自己,他們只是感情好咒林,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布熬拒。 她就那樣靜靜地躺著,像睡著了一般垫竞。 火紅的嫁衣襯著肌膚如雪澎粟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音捌议,去河邊找鬼哼拔。 笑死引有,一個(gè)胖子當(dāng)著我的面吹牛瓣颅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播譬正,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼宫补,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了曾我?” 一聲冷哼從身側(cè)響起粉怕,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎抒巢,沒想到半個(gè)月后贫贝,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蛉谜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年稚晚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片型诚。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡客燕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出狰贯,到底是詐尸還是另有隱情也搓,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布涵紊,位于F島的核電站傍妒,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏摸柄。R本人自食惡果不足惜颤练,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望塘幅。 院中可真熱鬧昔案,春花似錦、人聲如沸电媳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匾乓。三九已至捞稿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背娱局。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國打工彰亥, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人衰齐。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓任斋,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親耻涛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子废酷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355