[webpack] vue2 html-webpack-plugin,copy-webpack-plugin

지금 하고 있는 프로젝트에는 배포서버, QA서버 2개의 서버가 있다. 

각각의 서버에 robots.txt와 index.html을 각각 다르게 하고 싶었고, 해당 webpack-plugin을 install 했다.

참고로 나는 vue2cli를 사용했고, 각각의 플로그인이 ver5이상은 install되지 않았다.

 

npm i -D copy-webpack-plugin@4 html-webpack-plugin@4

 

그리고 다르게 배포할 파일을 다음과 같은 폴더 구조로 넣어주었다.

 

./
└─ static
    ├─ dev
    │   ├─ index.html
    │   └─ robots.txt
    └─ prod
        ├─ index.html
        └─ robots.txt

 

현 프로젝트에 vue.config.js가 있어 여기에서 webpack 설정을 해주었다.

 

const CopyPlugin = require('copy-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');

configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        devtool: 'source-map',
        plugins: [
          new CopyPlugin([{ from: 'static/prod/robots.txt', to: '' }]),
          // from : 어떤 위치의 파일/폴더
          // to : build 후 위치 (나는 최상위에 두려고 비워두었다.)
          new HtmlPlugin({
            template: 'static/prod/index.html',
          }),
        ],
      };
    } else {
      return {
        devtool: 'source-map',
        plugins: [
          new CopyPlugin([{ from: 'static/dev/robots.txt', to: '' }]),
          new HtmlPlugin({
            template: 'static/dev/index.html',
          }),
        ],
      };
    }
  },
  
  .
  .
  .
  
 }

 

이렇게 production 일때와 아닐때를 나누어서 세팅해 주었다.

- 끝 -