資訊專欄INFORMATION COLUMN
摘要：在文件中配置和一樣的語法配置的選項(xiàng)，支持的校驗(yàn)使用不支持或者規(guī)范的插件以為例注意這種寫法這個(gè)變量直接插入到里面了相當(dāng)于在這個(gè)文件的開始添加了獻(xiàn)上師傅的文章傻瓜式指南傻瓜式指南
1.總體介紹
不同資源不同loader，否則加載失??；
//loaders類似modules，exports的一個(gè)方法 //默認(rèn)Webpack只處理javaScript； //你的資源里有圖片、css、html...如果沒有相應(yīng)的loader，人家不認(rèn)識(shí)你；
可以通過全名XX-loader或短名xx引用；
loaders可以鏈?zhǔn)?/strong>寫，用!分離loaders和resource，如針對樣式loader:(style!css!sass)
loaders處理后的資源會(huì)用js語法包裹，最終返回js---------Webpack只處理javaScript
注意：loaders鏈?zhǔn)綄懙臅r(shí)候，[預(yù)]處理工具從右到左應(yīng)用?。。?/strong>如下：
require("style!css!less!bootstrap/less/bootstrap.less");
對bootstrap/less/bootstrap.less先進(jìn)行l(wèi)ess解析再css解析再style解析，最終返回js
loaders可以接受查詢參數(shù)--------具體處理工具查看對應(yīng)文檔；
用?引導(dǎo)query string，如url-loader?mimetype=image/png
查詢格式
?key=value&key2=value2
或 JSON對象
?{"key":"value","key2":"value2"}.
2. loader用法
1.通過require顯性聲明----------不推薦
只能處理某一明確的目錄文件；
require("!style!css!less!bootstrap/less/bootstrap.less");-----只處理bootstrap/less文件下的bootstrap.less
2.通過webpack.config.js配置---------推薦
通過正則表達(dá)式來綁定loaders----匹配一類文件
{
module: {
loaders: [
{
//匹配.jade結(jié)尾的文件；
test: /.jade$/,
loader: "jade"，
query:{}
},
{
//匹配.css結(jié)尾的文件；
test: /.css$/,
//鏈?zhǔn)絣oaders寫法一，從右往左解析
loader: "style!css" ，
query:{}
},
{
test: /.css$/,
//鏈?zhǔn)絣oaders寫法一，從右往左解析
loaders: ["style", "css"] ，
query:{}
},
{
test: /.scss$/,
//針對sass的解析，有依賴環(huán)境，可能是ruby……
//在linux中，如果報(bào)錯(cuò)，刪除sass-loader，重新npm init下
loaders: ["style", "css","sass"] ，
query:{}
},
]
}
}
3.命令行-------忽略
3. 使用preLoaders和postLoaders
perLoaders顧名思義就是在loaders執(zhí)行之前處理的，webpack的處理順序是perLoaders - loaders - postLoaders。
module: {
//在config文件中配置,和loaders一樣的語法
perLoaders: [
{
test: /.jsx?$/,
include: APP_PATH,
loader: "jshint-loader"
}
]
},
//配置jshint的選項(xiàng)，支持es6的校驗(yàn)
jshint: {
"esnext": true
}
4. 使用imports-loader不支持AMD或者CommonJS規(guī)范的插件
//以jquery為例
npm install imports-loader --save-dev
npm install jquery -save
//注意這種寫法 jQuery這個(gè)變量直接插入到plugin.js里面了
//相當(dāng)于在plugin.js這個(gè)文件的開始添加了 var jQuery = require("jquery");
import "imports?jQuery=jquery!./plugin.js";
5 獻(xiàn)上師傅的文章
Webpack傻瓜式指南1
Webpack傻瓜式指南2
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79251.html
摘要：配置完成后就可以使用來打包代碼了。值得注意的是會(huì)刪除所有無作用代碼也就是說那些包裹在這些全局變量下的代碼塊都會(huì)被刪除這樣就能保證這些代碼不會(huì)因發(fā)布上線而泄露。默認(rèn)會(huì)從項(xiàng)目的根目錄下引入這些文件。 命令使用 npm install webpack -g 作為全局安裝, 在任意目錄使用 npm install webpack --save-dev 作為項(xiàng)目依賴安裝 np...
摘要：在上面的列表中，是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步，這個(gè)應(yīng)用就具備熱刷新的功能。下一步，更新文件中的到現(xiàn)在為止，如果你在控制臺(tái)運(yùn)行壓縮文件將被創(chuàng)建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇，我們將繼續(xù)探索React 和 Webpack的使用。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） Rea...
摘要：在上面的列表中，是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步，這個(gè)應(yīng)用就具備熱刷新的功能。下一步，更新文件中的到現(xiàn)在為止，如果你在控制臺(tái)運(yùn)行壓縮文件將被創(chuàng)建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇，我們將繼續(xù)探索React 和 Webpack的使用。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） Rea...
摘要：接下來安裝和，執(zhí)行命令安裝很順利，沒有遇到任何問題。再總結(jié)一下我們遇到的坑初始化時(shí)的項(xiàng)目名稱要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。另外再增加，這樣刷新的速度會(huì)大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容本文也同步發(fā)表在我的公眾號(hào)“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個(gè)最簡單的webpack+react環(huán)境。 最近在玩webpack+rea...
閱讀 877·2021-11-24 09:38
閱讀 1102·2021-10-08 10:05
閱讀 2598·2021-09-10 11:21
閱讀 2814·2019-08-30 15:53
閱讀 1842·2019-08-30 15:52
閱讀 1981·2019-08-29 12:17
閱讀 3431·2019-08-29 11:21
閱讀 1623·2019-08-26 12:17
