안녕하세요 웹팩플러그인 중 BannerPlugin설정 관련 문의드... - 인프런

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

안녕하세요 웹팩플러그인 중 BannerPlugin설정 관련 문의드립니다.

해결된 질문

작성

437

안녕하세요 강사님

좋은 강의로 실무에서도 웹팩을 다룰수있게 해주셔서 감사하며 궁금한점이 있어서 질문드립니다.

강의 중 알려주신 BannerPlugin을 적용하려고하는데 production 환경에서는 주석이 제거되서

BannerPlugin이 적용되지않습니다.

https://github.com/react-boilerplate/react-boilerplate/tree/master/internals/webpack

(현재 저는 위에있는 리액트 보일러플레이트 프로젝트를 커스터마이징해서 사용중입니다)

위 URL에 보이는 내용과같이, 저는 웹팩플러그인 설정파일을 사용중인데, production에서는

TerserPlugin 옵션중 output: {comments: false}가

주석을 제거해서 production에서는 main 청크파일에서

BannerPlugin에 설정한 정보가 보이지 않는 문제가 있습니다.

(comments: true로 변경하면 정상적으로 main청크파일에서 BannerPlugin에서 설정한 정보를 지우진않습니다)

production 환경에서도 BannerPlugin을 사용하고싶은데, 어떻게하면 좀더 좋은방법이 될지 문의드립니다.

제가 찾아본 솔루션은 TerserPlugin의 옵션중 terserOptions중 preamble을 추가하는것인데 혹시 더 좋은 방법이 있을지 궁금합니다
ex)

terserOptions: { output: { preamble: "/* 넣고싶은 버전정보 */" comments: false }

(https://github.com/terser/terser)

// webpack.base.babel.js 은 전역(모든 NODE_ENV 환경에서 작동하는) 웹팩플러그인 설정파일입니다

webpack.base.babel.js

plugins: options.plugins.concat([
  new webpack.DefinePlugin({
    'process.env': {
       ...

    },
  }),
  new webpack.BannerPlugin({
    banner: `
      Build Date: ${new Date().toLocaleString()}
      Commit Version: ${commitHash}
    `,
  }),
]),

webpack.prod.babel.js

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        warnings: false,
        compress: {
          comparisons: false,
        },
        parse: {},
        mangle: true,
        output: {
          comments: false,
          ascii_only: true,
        },
      },
      parallel: true,
      cache: true,
      sourceMap: true,
    }),
  ],
  nodeEnv: 'production',
  sideEffects: true,
  concatenateModules: true,
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: 10,
    minSize: 0,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(
            /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
          )[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
},
...
...

웹팩 nodejs eslint babel

답변 4

김정환

지식공유자

오호 그러네요. 별로도 플러그인 추가할 필요없이 TerserPlugin 옵션으로 사용하는 방법이 더 나은 것 같아요.

김정환

지식공유자

webpack 4에서 이런 현상이 있다고 하네요. 웹팩 production 모드에서 BannerPlugin이 만든 주석이 사라지는 현상.

최적화 할 때 UglifyJsPlugin으로 특정 주석을 제외 시키는 방법을 알려주고 있네요.

저도 이렇게 해봤는데 참고해 보시면 좋을 것 같아요.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // npm i uglifyjs-webpack-plugin 

const banner = `/*! 빌드 날짜: ${new Date().toLocaleString()} */`

// ...

plugins: [
  new webpack.BannerPlugin({
    banner, // 배너 설정
    raw: true, // 문자열 자체를 주석으로 사용 
  }),

// ...

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        output: {
          preamble: banner // 이 문자열은 제거하지 않는것 같아요. 
        }
      }
    })

AjaAja

질문자

답변주셔서 감사합니다. UglifyJsPlugin도 살펴보아야겠네요

답변전에 개인적으로 찾아본 내용으로 TerserPlugin의 옵션중 terserOptions중 preamble을 이용해서 먼저 배포는해보았는데

이것도 괜찮은거같아서 공유드립니다

new TerserPlugin({
  terserOptions: {
    ...
    ...
    output: {
      preamble: `/* ${banner()} */`, // banner.js를 모듈로 분리해서 build date와 commitHash를 리턴하고 결과물은 청크파일 문두에 주석정보가 추가됩니다
      comments: false,
      ascii_only: true,
    },
  },
  ...
}),

김정환

지식공유자

저도 재현이 됩니다. 강의에서 놓친 부분인 것 같네요. 저도 자료를 찾아보고 여기에 이어서 말씀드리겠습니다.

인프런 커뮤니티 질문&답변

안녕하세요 웹팩플러그인 중 BannerPlugin설정 관련 문의드립니다.