步步向前之webpack

luffyZh 發布于2019-08-26 10:24 / 3237人閱讀

摘要：最近準備系統地學習，這篇文章將持續更新，記錄自己在使用中遇到的問題踩過的坑等，小白的錯誤不入法眼，掠過就好。字符串形式對象形式行內寫法多個之間用分割。

最近準備系統地學習webpack，這篇文章將持續更新，記錄自己在使用webpack中遇到的問題、踩過的坑等，小白的錯誤不入法眼，掠過就好。

常見用法 module 的 loader 屬性與 use 屬性聯系

查閱后，有說 webpack最新版的loader規則里，不在是loader屬性了，取而代之的是 use屬性，也有說 loader 是 use 的簡寫，我這邊不太確定，大佬們也可以評論區指教一下，我試了試，在 webpack4 以上的版本里做了如下操作：

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

我所在項目工程暫未受到影響，所以我個人覺得簡寫的可能性大點，但也不排除第一種說法 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傳遞參數
                    loader:"my-loader",
                    options:{}//這里傳遞參數給loader
                }
                exclude: /node_modules/
            },
        ]
    }
}

使用use，數組形式
數組內的每一項可以為字符串，也可以是對象。

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

行內loader寫法：
多個loader之間用!分割。

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

復制代碼行內loader可添加前綴，代表當前文件是否交由其他loader處理:

-! 表示不會讓文件再去通過 pre+normal loader處理了
! 表示不會讓normal loader處理了
!! 該文件只會讓行內loader處理

let a = require("inline-loader!./a") // !分割，inline-loader就是行內loader
let a = require("-!inline-loader!./a") // -!表示不會讓文件再去通過 pre+normal loader處理了
let a = require("!inline-loader!./a") // !  表示不會讓normal loader處理了
let a = require("!!inline-loader!./a") // !! 該文件只會讓行內loader處理

復制代碼命令行寫法：

webpack --module-bind jade-loader --module-bind "css=style-loader!css-loader"

報錯信息 報錯: npm ERR! also called "webpack". Did you name your project the samenpm ERR!

這個就很尷尬了，我建立工程隨手創建了一個名為webpack的文件夾，并執行了npm init -y(按默認選項初始化)，得到package.json文件：

然后可以繼續執行npm install webpack webpack-cli --save-dev 。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106129.html

步步向前之Element-UI

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

Imfan 2019-08-02 11:51 評論0 收藏0
步步向前之Element-UI

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

ZoomQuiet 2019-08-29 17:08 評論0 收藏0
vue單頁應用之創建和運行

摘要：首先要開始單頁應用開發，肯定是要知道如何運行，如何創建單頁，這里將一步步帶你入的坑。。。首先要開始vue單頁應用開發，肯定是要知道如何運行，如何創建單頁，這里將一步步帶你入vue的坑。。。 1.安裝node 安裝node并不是叫你學習node,而是我們需要node里面npm所有才去安裝，進入node官網的下載頁http://nodejs.cn/download/下...，安裝完畢之后...

Near_Li 2019-08-01 17:29 評論0 收藏0
vue單頁應用之創建和運行

摘要：首先要開始單頁應用開發，肯定是要知道如何運行，如何創建單頁，這里將一步步帶你入的坑。。。首先要開始vue單頁應用開發，肯定是要知道如何運行，如何創建單頁，這里將一步步帶你入vue的坑。。。 1.安裝node 安裝node并不是叫你學習node,而是我們需要node里面npm所有才去安裝，進入node官網的下載頁http://nodejs.cn/download/下...，安裝完畢之后...

DTeam 2019-08-20 18:55 評論0 收藏0