• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

compiler.plugin 이 undefined라고 뜹니다.

20.10.18 16:31 작성 조회수 323

2

안녕하세요

TypeError: compiler.plugin is not a function

위와 같은 에러가 떠서 compiler를 찍어봤더니 plugin이 존재하지 않아서 undefined라고 뜹니다.

compiler.hooks.emit.tapAsync(
      'emit',
      (compilation, callback) => {
        const source = compilation.assets['main.js'].source();
        console.log(source);
        callback();
      })
  }

이 방식을 사용하면 똑같이 나오는데

버전이 바뀐 것인가요?

답변 3

·

답변을 작성해보세요.

4

서진규(Jake Seo)님의 프로필

서진규(Jake Seo)

2021.09.18

웹팩 5에서 실습해보려 하는 분들

 

아래 코드처럼 해보세요.

 

class MyPlugin {
    apply(compiler) {
        compiler.hooks.done.tap("My Plugin", (stats) => {
            console.log("MyPlugin worked");
        });

        compiler.hooks.emit.tapAsync("My Plugin", (compilation, callback) => {
            console.log(
                "compilation.assets['main.js']",
                compilation.assets["main.js"].source()
            );

            callback();
        });
    }
}

module.exports = MyPlugin;

0

하정훈님의 프로필

하정훈

2020.11.20

웹팩 5버전에서 할려면 코드를 어떻게 수정해야 하나요?

adr10won님의 프로필

adr10won

2023.09.01

compiler.hooks.emit.tapAsync('MyWebpackPlugin', (compilation, callback) => {
    const source = compilation.assets['main.js'].source();
    const banner = [
                       '/**',
                       ' * This is result of processing by BannerPlugin.',
                       ' * Build Date: 2023-08-31',
                       ' */',
                   ].join('\n');
    const objectSourceNew = new compilation.compiler.webpack.sources.RawSource(banner + '\n\n' + source);
    compilation.updateAsset('main.js', objectSourceNew);
    callback();
});

이렇게 하면 될 것 같습니다!

0

강의에서 사용한 웹팩은 4 버전이고, 아마 위에서 실습하신건 최신 버전인 5버전인 것 같네요. BannerPlugin 코드를 참고한것인데 웹팩 버전 4 기준으로 작성된 코드입니다. 질문해 주셔서 감사합니다.