webpack(7) 样式处理和图片处理之手写loader

一. webpack模块中的require发生的事情:

   webpack模块中的require("xx");与nodejs里的require是不一样的. webpack会在读取后进行loader转换, 再进行抽象语法数分析, 

   比如require("src/assets/index.css") ; webpack中的require会被分析成为依赖函数, 读取参数的文件;

   在webpack读取文件之后, 经过loader后形成转换后的代码, 然后交给内部的AST分析, 然后在形成模块依赖列表;

 

二. 手写cssloader

  根据以上这个流程, 可以自己手写cssloader:

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

      (2)在读取完css文件后,本loader将文件的内容作为一个<style></style>的innerHTML, 然后放到head标签中;

      (3)经过loader处理的css文件会作为 js模块, 将js代码存放到chunk中, 最终和index.js合并打包输出

     (4) html引用的时候会执行输出的index.js, 就执行了这段代码后在页面上渲染.

 //index.js
 import "./src/assets/index.css"; //注意, 这里即使用require, 也和nodejs的require不一样,和commonjs的引入一样,是webpack作为依赖关系确定的标识

 

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

 

 

 

三.手写

      图片: 页面上的静态img标签, 和 js动态生成的图片document.createElement("img");

              动态图片: ajax从服务器上获取.