-
Notifications
You must be signed in to change notification settings - Fork 116
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Initiate a discussion about webpack. #296
Comments
export const ColorChangeUnplugin = createUnplugin((options:Array<UserOptions> = [],meta:any) => {
return {
name: 'unplugin-color-change',
enforce:'post',
// webpack's id filter is outside of loader logic,
// an additional hook is needed for better perf on webpack
transformInclude(id:string) {
// console.log(id)
return !id.endsWith('.html')
},
// just like rollup transform
transform(code:string) {
return transform(code,options)
},
// more hooks coming
webpack(compiler:any) {
compiler.plugin('emit', function (compilation:any, callback:Function) {
// compilation.chunks 存放所有代码块,是一个数组
compilation.chunks.forEach(function (chunk:any) {
// Webpack 会根据 Chunk 去生成输出的文件资源,每个 Chunk 都对应一个及其以上的输出文件
// 例如在 Chunk 中包含了 CSS 模块并且使用了 ExtractTextPlugin 时,
// 该 Chunk 就会生成 .js 和 .css 两个文件
chunk.files.forEach(function (filename:string) {
// compilation.assets 存放当前所有即将输出的资源
// 调用一个输出资源的 source() 方法能获取到输出资源的内容
let source = compilation.assets[filename].source();
source = transform(source,options)
compilation.assets[filename] = {
source: function () {
return source
},
size: function () {
return source.length
}
}
});
});
// 这是一个异步事件,要记得调用 callback 通知 Webpack 本次事件监听处理结束。
// 如果忘记了调用 callback,Webpack 将一直卡在这里而不会往后执行。
callback();
})
},
}
}) like this |
@antfu Because I have the same plug-in, there is such a need to convert something. Like this, it is not enough for that plug-in to write code in tranform at the pre stage. There is no problem in vite environment, but there is something wrong with webpack. Is it in conflict with other default plug-ins in vuecli? Therefore, a discussion was held. Please forgive me. |
We temporarily close this due to the lack of enough information. Please provide a minimal reproduction to reopen the issue. Thanks. https://antfu.me/posts/why-reproductions-are-required Please provide a full reproduction repository, instead of a few lines of code. |
#287 Here's the code. Last time, the problem of error reporting was solved. This time, the problem was that transform didn't take effect in webpack, so extra code had to be added to solve it. It is possible in vite environment, so I want to know whether transform will fail in webpack environment.The above code is a new webpack.The unique hook was solved. |
@sxzz I will provide you with a more detailed example tomorrow morning. Please close it first. |
Or you can clone gitee gitee code, download the zip and run it as a local plug-in, and add transforminclude to the zip! id.endwith('.html') Let it not report an error |
Is this a bug? |
Environment
vuecli 4.5
Reproduction
none
Describe the bug
none
Additional context
When we found a problem with unplugin, we discussed whether it was a problem or not, that is, in vuecli, although the code in transform in the plug-in was executed, it didn't take effect, as if it had been repeated and the returned code was completely useless.You need to write extra hooks to make it run.
Logs
No response
The text was updated successfully, but these errors were encountered: