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

안녕하세요 강사님 

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

강의 중 알려주신 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('@', '')}`;
        },
      },
    },
  },
},
...
...

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 // 이 문자열은 제거하지 않는것 같아요. 
        }
      }
    })

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