一. webpack模塊中的require發(fā)生的事情:

   webpack模塊中的require("xx");與nodejs里的require是不一樣的. webpack會(huì)在讀取后進(jìn)行l(wèi)oader轉(zhuǎn)換, 再進(jìn)行抽象語(yǔ)法數(shù)分析, 

   比如require("src/assets/index.css") ; webpack中的require會(huì)被分析成為依賴函數(shù), 讀取參數(shù)的文件;

   在webpack讀取文件之后, 經(jīng)過(guò)loader后形成轉(zhuǎn)換后的代碼, 然后交給內(nèi)部的AST分析, 然后在形成模塊依賴列表;

二. 手寫cssloader

  根據(jù)以上這個(gè)流程, 可以自己手寫cssloader:

      (1) index.js引入css文件;

      (2)在讀取完css文件后,本loader將文件的內(nèi)容作為一個(gè)<style></style>的innerHTML, 然后放到head標(biāo)簽中;

      (3)經(jīng)過(guò)loader處理的css文件會(huì)作為 js模塊, 將js代碼存放到chunk中, 最終和index.js合并打包輸出

     (4) html引用的時(shí)候會(huì)執(zhí)行輸出的index.js, 就執(zhí)行了這段代碼后在頁(yè)面上渲染.

 //index.js
 import "./src/assets/index.css"; //注意, 這里即使用require, 也和nodejs的require不一樣,和commonjs的引入一樣,是webpack作為依賴關(guān)系確定的標(biāo)識(shí)

1 //mycssloader.js
2 module.exports = function(source){
3   var str = `
4   var style = document.createElement("style");
5   style.innerHTML = \`${source}\`;
6   document.head.appendChild(style);
7   `
8   return str;
9 }

webpack.config.js

三.手寫

      圖片: 頁(yè)面上的靜態(tài)img標(biāo)簽, 和 js動(dòng)態(tài)生成的圖片document.createElement("img");

              動(dòng)態(tài)圖片: ajax從服務(wù)器上獲取.