提醒:本文发布于 4 年前 ,文中所描述的信息可能已发生改变,请谨慎使用。

需求:

使用 css module 处理 css 文件,基于处理后的 className Map 对应替换 html 中的 class 字段。

问题:
webpack 暂时没有发现如何在一个 loader 里面去获取另一个 loader 的处理数据
vue-loader 的添加属性的方式我不太喜欢,毕竟还是有 class 冲突的问题

应对场景,Angular JS 的 directive 的 template 和 uiRouter 的 template

一种处理思路。

以上两个场景对 template 都支持 function 和 string 两个类型。

重写 html-loader,输出一个 模板函数,函数接受一个对象参数,参数为 class 的映射表。

若映射表内未找到 class,这输出原始 class

变量类型检查,判断输入参数是否是映射表,不是则直接输出。

这样就可以在不修改之前的代码的情况下直接升级。

继续研究 webpack 的代码,搞清楚到底有没有办法在一个 loader 里面 invoke 另外一个 loader 并获取结果。

webpack/webpack#860

目前状态:支持运行时解析 html 并替换对应 class。
待开发:编译时解析 html 并生成模板函数,运行时传入 映射表
目标:编译时完成对应 class 的替换工作。

vue-loader 的逻辑

loader 载入 *.component 文件

根据文件内容生成一个大的 require 逻辑,拼接出多种不同的 loader。如果是 src 方式,就没有下面的步骤。

最外层 loader (selectors) 用于提取出某一块的代码,例如 取出 <style> 里面的。

通过给同一个 component 下的所有 loader 传相同的 scope 参数来标识。

webpack 会根据依赖关系把这个文件多次 load。

css-loader 和 style-loader

css-loader 如果配置 module,则会输出 module.exports.locals = {classMap}

css-loader 通过重写 module.exports.toString 方法来直接输出一段 css

style-loader 默认读取 module.exports,如果发现 locals,则 module.exports = locals

loader in plugins

http://stackoverflow.com/questions/28987626/using-a-loader-inside-a-webpack-plugin