느린 개발자

이번에 회사에서 프로젝트를 진행하던 도중, 테스트 기능을 구현하면서 꼭 필요한 파일이 있어

node_modules에 있는 어떠한 모듈에 정적파일을 복사하여 사용해야 하는 일이 있었습니다.

 그래서 이것에 대해서 어떻게 복사할 방법을 고민하던 중 js파일에 fs 모듈을 사용하여 디렉터리를 복사하는 방법을 사용하다

copy-webpack-plugin 모듈을 찾게 되어 간단하게 설정하여 구현한 방법을 소개하려고 합니다.

 

환경
nuxt 2.15.8

Typescript

composition Api

 

 

 

파일 시스템 경로 모듈을 사용하여 파일을 복사하는 방법

const fs = require('fs')
const path = require('path')

const srcFolder = path.join(
  __dirname,
  'node_modules',
  '라이브러리명',
  'dist'
)
const destFolder = path.join(__dirname, 'static', '_nuxt')
if (!fs.existsSync(destFolder)) {
  fs.mkdirSync(destFolder)  //root 경로 static 폴더에 _nuxt폴더를 생성
}
fs.copyFileSync(
  path.join(srcFolder, 'a.wasm'), // 라이브러리명 dist 폴더에 a.wasm 파일을 _nuxt로 복사
  path.join(destFolder, 'a.wasm')
)

 

nuxt는 정적파일과 빌드된 애플리케이션 파일 분리를 위해 기본적으로 "_nuxt" 폴더를 사용합니다. 이 폴더에는 웹팩(Webpack)을 통해 빌드된 자바스크립트 파일, CSS파일, 이미지 등의 리소스가 저장됩니다. 물론 이 폴더명을 변경할 수 있는데 nuxt.config.js파일 build.publicPath 옵션을 사용하여 사용자 정의 경로를 지정할 수 있습니다.

The build Property

 

 

copy-webpack-plugin 모듈을 사용하여 파일을 복사하는 방법

 

copy-webpack-plugin 모듈은 Webpack을 사용하여 프로젝트 빌드할 때 정적 파일을 복사하고 디렉터리를 만들기 위한 도구입니다.

이 모듈은 프로덕션 빌드 시에 특히 유용하며, HTML , CSS, 이미지 등과 같은 정적 파일을 적절한 위치에 배치하고 관리할 수 있도록 도와줍니다.

 

 

설치

npm install --save-dev copy-webpack-plugin

 

 

1) 사용방법 - webpack.config.js 파일에 구성

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/assets', to: 'assets' },
        { from: 'src/index.html', to: 'index.html' },
      ],
    }),
  ],
};

 

 

2) 사용방법 - nuxt.config.js 파일에 구성

import CopyPlugin from 'copy-webpack-plugin'
import path from 'path'
export default{

  // 생략
  
build: {
    html: {},

    transpile: [],

    loaders: {
      extend(config, ctx) {}
    },

    babel: {
      compact: true
    },

    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: path.join(   // 복사할 파일 위치
              __dirname,
              'node_modules',
              '라이브러리명',
              'dist'
            ),
            to: path.join('','폴더명') // 원하는 폴더 이름
          }
        ]
      })
    ]
  }
}

 

사용법에서 webpack.config.js 파일로 구성하거나 nuxt.config.js로 본인의 프로젝트 성격에 따라 선택하여 구성하시면 됩니다. 그리고 구성된 코드 보시면 to: 부분에서 폴더명을 적어서 사용하시거나 to: path.join('') 이런 식으로 안 적으셔도 가능합니다. 이제 copy-webpack-plugin을 사용하여 프로젝트의 정적 파일을 웹팩 빌드에 효과적으로 포함시킬 수 있을 것입니다. 플러그인의 다양한 기능과 옵션을 사용하여 웹팩 빌드 프로세스를 더욱 유연하게 조정할 수 있습니다.