今天繼續(xù)學(xué)習(xí)Webpack技術(shù)蒿涎。
文章是這篇 入門Webpack，看這篇就夠了
在開發(fā)的時候惦辛，每次修改代碼都需要重新打包德華會非常麻煩劳秋，于是一種新的技術(shù)熱更新出現(xiàn)了。每次修改代碼保存之后胖齐，都會自動構(gòu)建打包新的代碼玻淑。
Webpack可以提供這個服務(wù)，它會基于node.js構(gòu)建一個本地服務(wù)器呀伙，可以實現(xiàn)你想要的這些功能补履，不過它是一個單獨的組件，在webpack中進(jìn)行配置之前需要單獨安裝它作為項目依賴剿另。
Loaders是webpack中最讓人激動人心的功能之一了箫锤。通過使用不同的loader，webpack通過調(diào)用外部的腳本或工具可以對各種各樣的格式的文件進(jìn)行處理雨女，比如說分析JSON文件并把它轉(zhuǎn)換為JavaScript文件谚攒，或者說把下一代的JS文件（ES6，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器可以識別的JS文件氛堕×蟪簦或者說對React的開發(fā)而言，合適的Loaders可以把React的JSX文件轉(zhuǎn)換為JS文件讼稚。
這里文章的demo中有一處bug
module: {//在配置文件里添加JSON loader
loaders: [
{
test: /\.json$/,
loader: "json"
}
]
},
上面的loader應(yīng)該為“json-loader”括儒，與下載的功能名字相同，不然會報如下錯誤
ERROR in ./app/Greet.js
Module not found: Error: Can't resolve 'json' in '/Users/xxx/Documents/tryWebp'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'json-loader' instead of 'json',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
這時候我的webpack.config.js是這樣的
module.exports = {
// 打包模式之一锐想，可以用這個打包開發(fā)環(huán)境塑崖，速度較快，但是安全性不足
devtool: 'eval-source-map',
// 源文件痛倚，從這個文件引申出去的所有文件的來源规婆，這個文件中多有import的都會被一起打包。
entry: __dirname + "/app/main.js",
// 輸出文件的名字以及輸出路徑
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
// JSON loader
module: {
loaders: [
{
test: /\.json$/,//正則表達(dá)式匹配文件名稱
loader: "json-loader"http://一個loader的名稱蝉稳，應(yīng)與下載的名字完全相同
//include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）
//query：為loaders提供額外的設(shè)置選項（可選）
}
]
},
// 熱更新相關(guān)配置
devServer: {
port: 8080,
contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
colors: true,//終端中輸出結(jié)果為彩色
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true//實時刷新
}
}
先到這邊抒蚜，剩下明天繼續(xù)研究。
