x-style-loader

style loader module for webpack

Usage no npm install needed!

<script type="module">
  import xStyleLoader from 'https://cdn.skypack.dev/x-style-loader';
</script>

README

global-style-loader

这是一个webpack loader， 完全基于style-loader进行二次修改。

背景问题

由于在部分业务中， 一个页面可能存在大量的基于webpack打包后的JS文件，如果每个JavaScript文件都打包了CSS到文件中

那么style-loader将css添加到dom的JavaScript实现逻辑大约有300多行，这就会造成大量重复的函数实现

使用此loader， 可以将style loader中添加css到内联的style函数代码缩小到40行左右，极大减少这部分的代码体积

原理

此loader完全基于 style-loader, 基于style-loader将其中的代码尽可能复用『全局函数』

  1. createStyleElement、getHeadElement、isOldIE等等函数定义都改为类似window.StyleLoader.isOldIE 这样的一个函数调用，而非真正实现
  2. 将所有style-loader用到的各种函数添加到类似window.StyleLoader上，并且在页面全局提前引入

使用

  1. 与style-loader的使用，完全一样
  2. 将window.js 提前在页面引入