国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack&&loader

yuanzhanghu / 961人閱讀

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

引言

在回答一個問題時,引發一些疑問,分析總結下,作為備忘

webpack 
webpack對于我來說,應用場景主要是,編譯打包我通過模塊化組織書寫的文件,用其提供的各種loader可以讓我在js中模塊化的加載、管理各種格式resource,以及其附屬生態圈各種plugin進行功能拓展(例如常用的CommonsChunkPlugin、UglifyjsWebpackPlugin等等), webpack-dev-server做熱加載等等。
具體一些使用配置介紹,可以參考我之前一篇相關文章
webpack 加載方式

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

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

loader本質上是一個可以模塊化使用的加載處理resource的函數。本文著重討論,以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);

執行webpack后,運行case7.js,輸出如下

body{
    background: black;
}

更改配置

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

更改配置后輸出

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

為什么加載兩次后輸出會不一樣,module.exports從何而來?

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

上面是raw源碼中截取的部分內容,content是原樣讀取的文件,本身可能帶有 , 等,直接啟動觸發入口

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

一開始輸出沒有 等,因為這些特殊字符沒有轉義,解釋執行時保持其含義輸出,module.exports是raw-loader中自帶,webpack以此作為標識解析loader中輸出的模塊化資源,否則webpack打包時無法處理資源,默認為空對象{}。

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

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

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

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

重復執行兩次,第二次的輸入源是第一次的返回值

上面兩幅圖具體的說明了輸出結果的起因,輸入源經過stringify后特殊字符被轉義,拼接 "module.exports =" 后作為第二次執行的輸入源,webpack在模塊處理時,同一個資源最后一次輸出為準。

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

總結

通過簡單的例子,復習了webpack編譯后的文件執行流程,探索了編譯流程,研究意義還是有的。

相關問題 https://segmentfault.com/q/10...

參考鏈接: loader1

參考鏈接: loader2

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

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

相關文章

  • 關于react+antd樣式不生效問題的解決方式

    　　1、下面是添加antd組件樣式不生效代碼　　在入口文件中引入import'antd/dist/antd.css' 　　樣式生效，但是生成警告 　　WARNINGin./node_modules/antd/dist/antd.css 　　Failedtoparsesourcemap:'webpack://antd/./components/time- 　　picker/s...

    3403771864 評論0 收藏0

  • 微前端 —— menu&&project1（React）

    摘要：前言微前端理論篇微前端項目上一篇中，我們完成了項目的搭建，算是完成了整個微前端架構的一半工程了。項目項目是作為頁面的菜單顯示的，主要用于路由的控制。源碼地址源碼地址項目源碼地址微前端理論篇微前端項目微前端項目 前言 ????????微前端 —— 理論篇????????微前端 —— portal項目????????上一篇中，我們完成了portal項目的搭建，算是完成了整個微前端架構的一半...

    Euphoria 評論0 收藏0

  • react項目關于webpack配置修改

    一、前言通過CRA腳手架構建的項目，一般webpack配置是隱藏的，如果要修改，就要另外處理。想要修改webpack通常有兩種方式通過插件去增加或覆蓋webpack配置（方法一、方法二）或者釋放項目中的webpack配置，使之可見，然后可以修改（方法三）本來CRA腳手架將webpack等復雜的配置封裝在項目中，后續可以通過更新react-scripts來體驗版本升級帶來的新特性，但有些時候確實需要...

    社區管理員 評論0 收藏0

  • JS前端首屏優化技巧

    　　訪問時間超過3S對于用戶就十分痛苦，為考慮到用戶訪問效果。為此我，首屏加載時間一頓操作，基本都在2s左右，這樣的首屏加載時間，對于用戶來說，算是可以接受的。　　那我都哪些操作？下面就為大家展示　　打包分析　　在 package.json 中添加命令　　"report":"vue-cli-servicebuild--report"　　然后命令行執行npm ...

    3403771864 評論0 收藏0

  • Next.js踩坑入門系列（二）— 添加Antd && CSS

    摘要：踩坑入門系列一二添加三目錄重構再談路由陸續更新個人對于腳手架的有一種執念，如果搭建出來就是一個首頁標簽跳轉，實在不是我這個處女座的風格，因此第二步我就想引用框架，相信很多使用的開發者用的也都是這個框架吧。 Next.js踩坑入門系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目錄重構&&再談路由 陸續更新... 個人對于腳手架的UI有一種執...

    lifesimple 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<