Webpack-03loader

loader

如何加载css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 收集依赖读取代码 看见 import/require 的时候
const code = readFileSync(filepath).toString()

// 重点：正则判断
if(/\.css$/.test(filepath)){
  // 此时 css文件的内容 变成了 js的一个字符串
  code = `
    const str = ${JSON.stringify(code)}
    if(document){
      const style = document.createElement('style')
      style.innerHTML = str;
      document.head.appendChild(style)
    }
    export default str;
  `
}

loader 可以是一个函数 or 异步函数

1
2
3
4
5
6
7
8
9
10
11
12
function transform(code){
  const code2 = doXXX(code)
  return code2
}
module.exports = transform

// or
async function transform(code){
  const code2 = await doXXX(code)
  return code2
}
module.exports = transform
  • css-loader.js
1
2
3
4
5
6
7
8
9
10
11
12
function transform(code){
  return `
    const str= ${JSON.stringify(code)}
    if(document){
      const style = document.createElement('style')
      style.innerHTML = str;
      document.head.appendChild(style)
    }
    export default str;
  `
}
module.exports = transform
  • 核心逻辑
    • 为啥用 require 加载loader,因为webpack的loader是从 config里读取的，要动态的加载
    • 第二个原因是 旧版的node不支持 import
1
2
3
4
if(/\.css$/.test(filepath)){
  // 此时 css文件的内容 变成了 js的一个字符串
  code = require('./loaders/css-loader.js')(code)
}

loader的优化

  • 单一职责原则
  • 每个loader只做一件事

大概流程

  • sass-loader 将 .scss 文件转化为 .css
  • css-loader 将 .css 文件转化为 js 里的一个变量 字符串str
  • style-loader 通过 生成style标签 将 str 内容插入到 style里
    • 本质是在 原有代码基础上 插入一部分代码
    • 这个时机在哪？这个要参考webpack

webpack style-loader思路

  • style-loader 在 pitch 钩子里通过 css-loader 来require 内容
  • 然后

webpack-loader 是什么

  • webpack自带的打包只支持 js
  • 当我们想要加载 css/scss/ts/md 文件时，需要用loader
  • loader 原理就是把文件内容包装成能运行的JS

例如

  • 加载 css 用到 style-loader 和 css-loader
  • css-loader 把代码 从 CSS 变成 export default str 形式的JS
  • style-loader 把代码挂在到 head 里的 style 里

例如

  • file-loader 如果是 图片，图片小就变成 base64,图片大就在 形如public 的资源目录里生成这个文件，然后读取这个文件的相对路径