資訊專欄INFORMATION COLUMN
摘要：最近準(zhǔn)備系統(tǒng)地學(xué)習(xí)，這篇文章將持續(xù)更新，記錄自己在使用中遇到的問題踩過的坑等，小白的錯(cuò)誤不入法眼，掠過就好。字符串形式對象形式行內(nèi)寫法多個(gè)之間用分割。
最近準(zhǔn)備系統(tǒng)地學(xué)習(xí)webpack，這篇文章將持續(xù)更新，記錄自己在使用webpack中遇到的問題、踩過的坑等，小白的錯(cuò)誤不入法眼，掠過就好。
常見用法 module 的 loader 屬性 與 use 屬性聯(lián)系查閱后，有說 webpack最新版的loader規(guī)則里，不在是loader屬性了，取而代之的是 use屬性，也有說 loader 是 use 的簡寫，我這邊不太確定，大佬們也可以評論區(qū)指教一下，我試了試，在 webpack4 以上的版本里做了如下操作：
//...
{
test: /.vue$/,
// use: ["vue-loader"]
loader: ["vue-loader"]
},
//...
我所在項(xiàng)目工程暫未受到影響，所以我個(gè)人覺得簡寫的可能性大點(diǎn)，但也不排除第一種說法 webpack 對寫法 做了兼容，新版本的文檔都是采用 use, 所以大家采用 use 就好。
查閱資料得出了 loader的不同寫法__作者：花樣前端__掘金
直接寫loader
module.exports={
module:{
rules:[
{
test: /.js$/,
loader: "my-loader",
exclude: /node_modules/
},
]
}
}
使用use，字符串形式
module.exports={
module:{
rules[
{
test: /.js$/,
use: "my-loader",//直接傳遞字符串
exclude: /node_modules/
},
]
}
}
使用use，對象形式
module.exports={
module:{
rules[
{
test: /.js$/,
use: { //對象形式，可以給loader傳遞參數(shù)
loader:"my-loader",
options:{}//這里傳遞參數(shù)給loader
}
exclude: /node_modules/
},
]
}
}
使用use，數(shù)組形式
數(shù)組內(nèi)的每一項(xiàng)可以為字符串，也可以是對象。
module.exports = {
module: {
rules: [
{
test: /.js$/,
use: [
"my-loader1",//字符串形式
{ loader: "my-loader2", options: {} }//對象形式
],
exclude: /node_modules/
},
]
}
}
行內(nèi)loader寫法：
多個(gè)loader之間用!分割。
let something=require("loader2!loader1!./profile.js")
復(fù)制代碼行內(nèi)loader可添加前綴，代表當(dāng)前文件是否交由其他loader處理:
-! 表示不會(huì)讓文件再去通過 pre+normal loader處理了
! 表示不會(huì)讓normal loader處理了
!! 該文件只會(huì)讓行內(nèi)loader處理
let a = require("inline-loader!./a") // !分割，inline-loader就是行內(nèi)loader
let a = require("-!inline-loader!./a") // -!表示不會(huì)讓文件再去通過 pre+normal loader處理了
let a = require("!inline-loader!./a") // ! 表示不會(huì)讓normal loader處理了
let a = require("!!inline-loader!./a") // !! 該文件只會(huì)讓行內(nèi)loader處理
復(fù)制代碼命令行寫法：
webpack --module-bind jade-loader --module-bind "css=style-loader!css-loader"報(bào)錯(cuò)信息 報(bào)錯(cuò): npm ERR! also called "webpack". Did you name your project the samenpm ERR!
這個(gè)就很尷尬了，我建立工程隨手創(chuàng)建了一個(gè)名為webpack的文件夾，并執(zhí)行了npm init -y(按默認(rèn)選項(xiàng)初始化)，得到package.json文件：
然后可以繼續(xù)執(zhí)行npm install webpack webpack-cli --save-dev 。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/106129.html
摘要：無效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無小圖標(biāo)，后邊中括號結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...
摘要：無效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無小圖標(biāo)，后邊中括號結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...
摘要：首先要開始單頁應(yīng)用開發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁，這里將一步步帶你入的坑。。。 首先要開始vue單頁應(yīng)用開發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁，這里將一步步帶你入vue的坑。。。 1.安裝node 安裝node并不是叫你學(xué)習(xí)node,而是我們需要node里面npm所有才去安裝，進(jìn)入node官網(wǎng)的下載頁http://nodejs.cn/download/下...，安裝完畢之后...
摘要：首先要開始單頁應(yīng)用開發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁，這里將一步步帶你入的坑。。。 首先要開始vue單頁應(yīng)用開發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁，這里將一步步帶你入vue的坑。。。 1.安裝node 安裝node并不是叫你學(xué)習(xí)node,而是我們需要node里面npm所有才去安裝，進(jìn)入node官網(wǎng)的下載頁http://nodejs.cn/download/下...，安裝完畢之后...
閱讀 3443·2021-11-24 09:39
閱讀 3312·2021-11-23 09:51
閱讀 1005·2021-11-18 10:07
閱讀 3641·2021-10-11 10:57
閱讀 2907·2021-10-08 10:04
閱讀 3152·2021-09-26 10:11
閱讀 1184·2021-09-23 11:21
閱讀 3027·2019-08-29 17:28
