Initiate a discussion about webpack.

[wojiaoxiaomayun]

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

[wojiaoxiaomayun]

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

[wojiaoxiaomayun]

@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.

[sxzz]

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.

[wojiaoxiaomayun]

#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.

[wojiaoxiaomayun]

@sxzz I will provide you with a more detailed example tomorrow morning. Please close it first.

[wojiaoxiaomayun]

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

[wojiaoxiaomayun]

@sxzz test code this is demo,please read readme.md,thanks for you.

[wojiaoxiaomayun]

Is this a bug？