成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

步步向前之webpack

luffyZh / 3263人閱讀

摘要：最近準(zhǔn)備系統(tǒng)地學(xué)習(xí)，這篇文章將持續(xù)更新，記錄自己在使用中遇到的問(wèn)題踩過(guò)的坑等，小白的錯(cuò)誤不入法眼，掠過(guò)就好。字符串形式對(duì)象形式行內(nèi)寫(xiě)法多個(gè)之間用分割。

最近準(zhǔn)備系統(tǒng)地學(xué)習(xí)webpack，這篇文章將持續(xù)更新，記錄自己在使用webpack中遇到的問(wèn)題、踩過(guò)的坑等，小白的錯(cuò)誤不入法眼，掠過(guò)就好。

常見(jiàn)用法 module 的 loader 屬性 與 use 屬性聯(lián)系

查閱后，有說(shuō) webpack最新版的loader規(guī)則里，不在是loader屬性了，取而代之的是 use屬性，也有說(shuō) loader 是 use 的簡(jiǎn)寫(xiě)，我這邊不太確定，大佬們也可以評(píng)論區(qū)指教一下，我試了試，在 webpack4 以上的版本里做了如下操作：

      //...
     {
        test: /.vue$/,
        // use: ["vue-loader"]
        loader: ["vue-loader"]
      },
      //...

我所在項(xiàng)目工程暫未受到影響，所以我個(gè)人覺(jué)得簡(jiǎn)寫(xiě)的可能性大點(diǎn)，但也不排除第一種說(shuō)法 webpack 對(duì)寫(xiě)法 做了兼容，新版本的文檔都是采用 use, 所以大家采用 use 就好。

查閱資料得出了 loader的不同寫(xiě)法__作者：花樣前端__掘金

直接寫(xiě)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，對(duì)象形式

module.exports={
    module:{
        rules[
             {
                test: /.js$/,
                use: {  //對(duì)象形式，可以給loader傳遞參數(shù)
                    loader:"my-loader",
                    options:{}//這里傳遞參數(shù)給loader
                }
                exclude: /node_modules/
            },
        ]
    }
}

使用use，數(shù)組形式
數(shù)組內(nèi)的每一項(xiàng)可以為字符串，也可以是對(duì)象。

module.exports = {
    module: {
        rules: [
            {
                test: /.js$/,
                use: [
                    "my-loader1",//字符串形式
                    { loader: "my-loader2", options: {} }//對(duì)象形式
                ],
                exclude: /node_modules/
            },
        ]
    }
}

行內(nèi)loader寫(xiě)法：
多個(gè)loader之間用!分割。

let something=require("loader2!loader1!./profile.js")

復(fù)制代碼行內(nèi)loader可添加前綴，代表當(dāng)前文件是否交由其他loader處理:

-! 表示不會(huì)讓文件再去通過(guò) 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ì)讓文件再去通過(guò) pre+normal loader處理了
let a = require("!inline-loader!./a") // !  表示不會(huì)讓normal loader處理了
let a = require("!!inline-loader!./a") // !! 該文件只會(huì)讓行內(nèi)loader處理

復(fù)制代碼命令行寫(xiě)法：

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106129.html

相關(guān)文章

  • 步步向前之Element-UI

    摘要：無(wú)效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無(wú)小圖標(biāo)，后邊中括號(hào)結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...

    Imfan 評(píng)論0 收藏0

  • 步步向前之Element-UI

    摘要：無(wú)效方案根據(jù)交易所小時(shí)成交量占比和實(shí)時(shí)價(jià)格加權(quán)計(jì)算得到渲染結(jié)果是一個(gè)包含了文字，同時(shí)有名為的，并無(wú)小圖標(biāo)，后邊中括號(hào)結(jié)構(gòu)里只能有一個(gè)有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實(shí)現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實(shí)際應(yīng)用大多數(shù)是需要自適應(yīng)占滿父元素，超出滾動(dòng)固定表頭的...

    ZoomQuiet 評(píng)論0 收藏0

  • vue單頁(yè)應(yīng)用之創(chuàng)建和運(yùn)行

    摘要：首先要開(kāi)始單頁(yè)應(yīng)用開(kāi)發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁(yè)，這里將一步步帶你入的坑。。。 首先要開(kāi)始vue單頁(yè)應(yīng)用開(kāi)發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁(yè)，這里將一步步帶你入vue的坑。。。 1.安裝node 安裝node并不是叫你學(xué)習(xí)node,而是我們需要node里面npm所有才去安裝，進(jìn)入node官網(wǎng)的下載頁(yè)http://nodejs.cn/download/下...，安裝完畢之后...

    Near_Li 評(píng)論0 收藏0

  • vue單頁(yè)應(yīng)用之創(chuàng)建和運(yùn)行

    摘要：首先要開(kāi)始單頁(yè)應(yīng)用開(kāi)發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁(yè)，這里將一步步帶你入的坑。。。 首先要開(kāi)始vue單頁(yè)應(yīng)用開(kāi)發(fā)，肯定是要知道如何運(yùn)行，如何創(chuàng)建單頁(yè)，這里將一步步帶你入vue的坑。。。 1.安裝node 安裝node并不是叫你學(xué)習(xí)node,而是我們需要node里面npm所有才去安裝，進(jìn)入node官網(wǎng)的下載頁(yè)http://nodejs.cn/download/下...，安裝完畢之后...

    DTeam 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<