Webpack으로 Assets 폴더를 Public Directory로 Push하는 방법

제목: Webpack을 사용하여 애셋 폴더를 공용 디렉토리로 푸시하기

Webpack을 처음 사용할 때는 모든 것이 잘 동작할 수도 있지만, dist 폴더를 빌드하려고 할 때 문제가 발생할 수 있습니다. 애셋을 dist 폴더에 푸시하는 데 어려움을 겪고 있다면 혼자가 아닙니다. 이 블로그 포스트에서는 이 문제를 해결하는 방법을 알아보고 애셋을 올바른 위치에 가져오는 방법을 살펴보겠습니다.

문제: 애셋이 Dist 폴더에 푸시되지 않음

현재, dist 폴더를 빌드할 때 index.html과 bundle.js 파일은 정상적으로 가져올 수 있지만, 애셋은 빠져 있습니다. file-loader 는 원하는 작업을 수행하기에는 충분하지 않은 것 같고, 구글에서 찾은 결과도 필요한 답을 제공하지 못했습니다.

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
      { test: /\.(png|jpe?g|svg)$/, use: { loader: 'file-loader', options: {} } }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    }),
    new CopyWebpackPlugin([
      { from: 'app/assets', to: 'assets' }
    ])
  ]
};

해결책: Copy-Webpack-Plugin 사용하기

애셋이 dist 폴더에 푸시되지 않는 문제를 해결하기 위해 Copy-Webpack-Plugin을 사용할 것입니다. 이 플러그인을 사용하면 ‘app/assets/’ 디렉토리의 모든 애셋을 ‘dist/assets/’ 디렉토리로 복사할 수 있습니다. 이를 위해 webpack.config.js 파일에 다음 코드를 추가하면 됩니다:

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

module.exports = {
    // 다른 구성 옵션...

    plugins: [
        new CopyWebpackPlugin([
            { from: 'app/assets', to: 'assets' }
        ])
    ]
};

설치

해결책을 구현하기 전에 Copy-Webpack-Plugin이 설치되어 있는지 확인하세요. 터미널에서 다음 명령을 실행하여 설치할 수 있습니다:

npm install copy-webpack-plugin

마무리

해결책을 구현하고 애셋을 성공적으로 dist 폴더에 푸시한 후에는 React 컴포넌트에서 이미지를 수동으로 가져올 필요가 없다는 사실을 기억해야 합니다. Webpack은 이미지를 자동으로 포함하며, 상대 경로를 사용하여 참조할 수 있습니다.

이 블로그 포스트에서 설명한 단계를 따라가면 Webpack을 사용할 때 애셋이 dist 폴더에 푸시되지 않는 문제를 해결할 수 있습니다. Copy-Webpack-Plugin을 사용하면 기존의 Webpack 구성과 원활하게 통합되는 간단한 해결책을 제공합니다.

즐거운 코딩하세요!

참고 자료 :

https://stackoverflow.com/questions/45578665/push-assets-folder-to-public-directory-with-webpack

같은 카테고리의 다른 글 보기 :

reactjs