我正在开发一个Webpack插件,它基本上在块中查找css
资产,当它找到这样的资产时,在它上面应用一些返回2个输出的postCSS
插件,继续使用Extract-Text-Plugin
提取,其他输出应该成为 chunk 中的新模块,在运行时将其注入头部。
我无法实现的唯一部分是在现有块中创建新模块的部分。有一些指示/想法吗?
我设法创建了一个 new chunk ,但是没有webpack包装器,这意味着我无法支持HMR用于那段css并且懒得加载它。
class ExtractTPAStylePlugin {
constructor(options) {
this._options = Object.assign({
pattern: [
/"\w+\([^\)]+\)"/
]
}, options);
}
extract(compilation, chunks) {
const promises = [];
chunks.forEach((chunk) => {
promises.push(
chunk.files
.filter(fileName => fileName.endsWith('.css'))
.map(file => postcss([extractStyles(this._options)])
.process(compilation.assets[file].source(), {from: file, to: file})
.then((result) => {
compilation.assets[file] = new RawSource(result.css);
const filename = file.replace('.css', fileSuffix);
const newChunk = new Chunk(filename);
newChunk.files = [filename];
newChunk.ids = [];
compilation.chunks.push(newChunk);
const extractedStyles = `(${addStylesTemplate})()`
.replace('__CSS__', JSON.stringify(result.extracted))
.replace('__ID__', file);
compilation.assets[filename] = new OriginalSource(extractedStyles);
}))
);
});
return Promise.all(promises);
}
apply(compiler) {
compiler.plugin('compilation', (compilation) => {
compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
this.extract(compilation, chunks)
.then(() => callback())
.catch(callback);
});
});
}
}
module.exports = ExtractTPAStylePlugin;
答案 0 :(得分:1)
好的,所以我设法从几个插件中收集了一些代码,而成功的解决方案是将加载器注入到一些假的导入文件中,在该加载器中将整个js代码加载到主捆绑包中,然后放入optimize-chunk-assets
阶段的结果的一些占位符。
然后,在optimize-chunk-assets
中,您可以找到相关的块,并使用ReplaceSource
查找并替换占位符。
为获得灵感,您可以签出plugin。
答案 1 :(得分:-1)
也许有更多的方法可以做到这一点。
我发现的一种方便的方法是创建一个自定义NormalModuleFactory
插件并将其与编译器挂钩。
该插件接收模块请求和上下文(从何处导入什么内容)。这样,您可以匹配请求并返回模块源。简化后,它看起来像:
class CustomModuleFactoryPlugin {
apply (normalModuleFactory) {
// Tap in the factory hook.
normalModuleFactory.hooks.factory.tap(
'CustomModuleFactoryPlugin',
factory => (data, cb) => {
const { context } = data
const { request } = data.dependencies[0]
if (path.join(context, request).contains('/something/you/expect') {
return cb(null, new RawSource('Success!'))
}
return factory(data, cb)
}
)
}
}