webpack&&loader

yuanzhanghu 發(fā)布于2019-08-20 16:31 / 964人閱讀

摘要：本質(zhì)上是一個(gè)可以模塊化使用的加載處理的函數(shù)。本文著重討論以作為樣本分析。下面一幅圖分別是單和雙編譯結(jié)果圖。總結(jié)通過(guò)簡(jiǎn)單的例子復(fù)習(xí)了編譯后的文件執(zhí)行流程探索了編譯流程研究意義還是有的。相關(guān)問(wèn)題參考鏈接參考鏈接

引言

在回答一個(gè)問(wèn)題時(shí),引發(fā)一些疑問(wèn),分析總結(jié)下,作為備忘

webpack

webpack對(duì)于我來(lái)說(shuō),應(yīng)用場(chǎng)景主要是,編譯打包我通過(guò)模塊化組織書(shū)寫(xiě)的文件,用其提供的各種loader可以讓我在js中模塊化的加載、管理各種格式resource,以及其附屬生態(tài)圈各種plugin進(jìn)行功能拓展(例如常用的CommonsChunkPlugin、UglifyjsWebpackPlugin等等), webpack-dev-server做熱加載等等。
具體一些使用配置介紹,可以參考我之前一篇相關(guān)文章

webpack 加載方式

首先webpack build后的文件中代碼,通過(guò)靈活的配置可以被打包成各種標(biāo)準(zhǔn)格式的代碼(AMD,CMD等等),
在js中表面上可以通過(guò)形如import x form xx、require("x")、require.ensure()等方式引入各種資源,本質(zhì)上是先通過(guò)resolve解析,然后loader加載,類(lèi)似管道的效果進(jìn)行各種預(yù)先設(shè)置好的加工處理。

loader

A webpack loader is a Node module that tells webpack how to take some input content and transform it into output JavaScript.

loader本質(zhì)上是一個(gè)可以模塊化使用的加載處理resource的函數(shù)。本文著重討論,以raw loader作為樣本分析。

raw loader

Loads raw content of a file (as utf-8).

配置

 entry:{
        "case7":__dirname+"/index.js",
    },
    output:{
        path: __dirname+"/dist",
        filename:"[name].js",
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: "raw-loader"
            }
        ]
    }

index.js

import str from "./file.css";
console.log(str);

執(zhí)行webpack后,運(yùn)行case7.js,輸出如下

body{
    background: black;
}

更改配置

原配置中添加
{
    test: /.css$/,
    use: "raw-loader"
}
--------------------------------  equivalent way
原配置中替換
{
    test: /.css$/,
        use: ["raw-loader","raw-loader"]
}

更改配置后輸出

module.exports = "body{
    background: black;
}"

為什么加載兩次后輸出會(huì)不一樣,module.exports從何而來(lái)?

module.exports = function(content) {
        
    return "module.exports = " + JSON.stringify(content);
}

上面是raw源碼中截取的部分內(nèi)容,content是原樣讀取的文件,本身可能帶有 , 等,直接啟動(dòng)觸發(fā)入口

return fn.apply(context, args);  //loaderRunner.js line:119

一開(kāi)始輸出沒(méi)有等,因?yàn)檫@些特殊字符沒(méi)有轉(zhuǎn)義,解釋執(zhí)行時(shí)保持其含義輸出,module.exports是raw-loader中自帶,webpack以此作為標(biāo)識(shí)解析loader中輸出的模塊化資源,否則webpack打包時(shí)無(wú)法處理資源,默認(rèn)為空對(duì)象{}。

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);   執(zhí)行module函數(shù),有導(dǎo)出借助modle參數(shù),沒(méi)導(dǎo)出僅做執(zhí)行分割后文件邏輯使用  //line:20

--------
             (function(module, exports) {     //line:78

            module.exports = "body{
    background: black;
}"

             }),
 編譯后文件中自執(zhí)行函數(shù)中的參數(shù),每一個(gè)參數(shù)都代表一個(gè)模塊化的資源,模塊資源導(dǎo)出的資源被存儲(chǔ)到module上。
 ----------------
return module.exports;   // Return the exports of the module,在其它模塊中被引入時(shí)會(huì)被使用   //line:33

重復(fù)執(zhí)行兩次,第二次的輸入源是第一次的返回值

上面兩幅圖具體的說(shuō)明了輸出結(jié)果的起因,輸入源經(jīng)過(guò)stringify后特殊字符被轉(zhuǎn)義,拼接 "module.exports =" 后作為第二次執(zhí)行的輸入源,webpack在模塊處理時(shí),同一個(gè)資源最后一次輸出為準(zhǔn)。

下面一幅圖分別是單loader和雙loader編譯結(jié)果圖。

總結(jié)

通過(guò)簡(jiǎn)單的例子,復(fù)習(xí)了webpack編譯后的文件執(zhí)行流程,探索了編譯流程,研究意義還是有的。

相關(guān)問(wèn)題 https://segmentfault.com/q/10...

參考鏈接: loader1

參考鏈接: loader2