Webpack 筆記一：配置文件介紹
雖然還是那一句，Webpack和Browserify比，我更喜歡Browserify，因?yàn)閃ebpack需要配置文件，需要學(xué)習(xí)成本。相比之下，Browserify相對(duì)簡(jiǎn)單實(shí)用。Webpack需要相對(duì)復(fù)雜的配置文件。
整個(gè)webpack的難點(diǎn)在于配置文件，只要我們掌握的webpack的配置文件規(guī)格，一切都將引刃而解。在此，我們一步步揭秘常用的幾款配置文件。
css-loader 和 style-loader
該用途即是將css或者style直接引入，并且與js一同打包。
配置文件寫(xiě)法
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loader is used for ".jade" files
{ test: /\.css$/, loader: "style!css" },
// => "style" and "css" loader is used for ".css" files
// Alternative syntax:
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}
命令行寫(xiě)法
$ webpack --module-bind jade --module-bind 'css=style!css'
babel-loader
結(jié)合全新的es6和es2015，通過(guò)webpack將js代碼進(jìn)行轉(zhuǎn)換。當(dāng)然，你也可以直接用babel轉(zhuǎn)換，但是考慮到效率的問(wèn)題，webpack+babel必然是你的首選。
安裝
npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev
配置文件寫(xiě)法
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
file-loader
將常用靜態(tài)文件例如圖片，通過(guò)webpack進(jìn)行分類(lèi)打包。
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
bootstrap與webpack的坑
如果你使用webpack，同時(shí)想使用webapck進(jìn)行打包。字體文件的格式導(dǎo)致錯(cuò)誤，css-loader不能滿(mǎn)足bootstrap的打包。兩種解決方案：
第一種需要學(xué)習(xí)成本，請(qǐng)自行研究。第二種較為簡(jiǎn)單。只需要使用file-loader將字體文件打包。
{test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader" }
url-loader
這個(gè)loader的工作原理和file-loader類(lèi)似，但是會(huì)返回一個(gè)數(shù)據(jù)Url小于某個(gè)字節(jié)大小限制（默認(rèn)是沒(méi)有限制）。
如果超過(guò)限制，則會(huì)使用file-loader，所有的查詢(xún)參數(shù)會(huì)傳過(guò)去。
配置文件寫(xiě)法
{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}
或者
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
命令行寫(xiě)法
webpack --module-bind "png=url-loader?mimetype=image/png"
react-hot-loader
專(zhuān)門(mén)針對(duì)react的hot-reloading技術(shù)，大大提升react開(kāi)發(fā)的效率。
json-loader
通過(guò)webpack直接將json對(duì)象打包。
配置文件寫(xiě)法
{
test: /\.json$/,
loader: 'json-loader'
}
html-loader
將靜態(tài)網(wǎng)頁(yè)html打包，主要是針對(duì)image內(nèi)的文件地址。
小結(jié)
還有各種各樣的plugins等待你們自己挖掘。
參考
轉(zhuǎn)載，請(qǐng)表明出處。總目錄前端經(jīng)驗(yàn)收集器
