我的需求是从 tsx 代码中抽离样式到独立的 css 文件,再把样式文件经过 style-loader, css-loader 等进行处理。
目前我开发了一个 loader,做到了解析修改源码和生成 css 内容
export default function (source) {
const webpackEnv = this
// 修改源码,抽离 css
const { code, css } = transform(source)
// 获取输出路径
const context = webpackEnv.rootContext
const outputPath = interpolateName(webpackEnv, '[contenthash].[ext]',
{
context,
content: source
}
)
// TODO: 将 css 文件经过 style-loader 处理
webpackEnv.emitFile(outputPath, css)
// 返回源码
return code
}
我遇到的是问题是:
1、调用 webpack 的 emitFile api 没有生成 css 文件
2、怎么将生成的文件通过 style-loader, css-loader 处理
3、怎么将处理后的文件链接到 html 文件中
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…