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

요약

개발환경에서 src/assets/.... 에 있는 이미지 파일을 제대로 참조하는 방법이 궁금합니다.

구성요소

프로젝트의 구성요소는 아래와 같습니다.

• public[index.html, favicon.ico]

• src[assets[image0, image1...], index.js 등]

설치된 패키지는 아래와 같습니다.

    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"

// 본 강의에선 4.x.x 버전을 사용하지만...
// 5 version을 공부해야해서... 죄송합니다 😥

설명

dev server를 실행시켜 개발할 때,

js 파일을 수정하면 바로 반영이 되는 걸 확인했습니다.

그런데 이미지 파일의 경우 다른 파일을 참조하도록 하면 해당 파일을 불러오지 못합니다. 그리고 build된 파일을 참조합니다.

예로들어 정적 이미지 파일이 ./src/assets/image_0.jpg 라면,

dev server로 실행시켜 확인하면 HOST/dist/assets/images/[hash][ext][query].jpg 이렇게 되어있습니다. (경로가 다름)

그리고 build를 하면 분명 assets 디렉토리엔 다수의 이미지 파일이 존재함에도 불구하고 코드에서 사용된 이미지 파일만 build됩니다.

그러면 만약 코드내부에서 동적으로 다른 static image 파일을 참조하게 된다면 해당 이미지가 없기 때문에 오류가 날텐데 이런건 어떻게 처리해야하나요?

코드

const path = require('path');
const { BannerPlugin, DefinePlugin } = require('webpack');
const childProcess = require('child_process');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDevMode = (process.env.NODE_ENV || 'development').trim() === 'development';

console.log('is DEV mode?', isDevMode);
console.log('__dirname: ', __dirname);

module.exports = {
  mode: isDevMode ? 'development' : 'production',
  // entry: webpack 시작되는 부분이라고 생각하면 된다.
  entry: {
    main: './src/index.js',
  },
  /**
   *  output
   * entry point를 기준으로
   * 모든 .js 파일을 합쳐서 하나의 bundle 파일로 만드는데,
   * 이걸 어디에 저장할 것인지 지정하는 option
   */
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: isDevMode ? '[name].js' : 'main.[contenthash].js',
    chunkFilename: '[id].chunk.js',
    assetModuleFilename: 'images/[hash][ext][query]',
    clean: true,
  },
  devServer: {
    port: 3000,
    hot: true,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    // static: {
    //   directory: path.resolve(__dirname, './src/assets/'),
    // },
  },
  /**
   * module
   * test에 설정한 파일들을 inspect 하여,
   * 조건에 맞는 파일들에 대해 loader 들을 실행하여 해석함
   */
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        exclude: [/node_modules/],
        use: [
          // creates 'style' nodes from JS strings
          isDevMode
            ? 'style-loader'
            : {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: '',
                },
              },
          // translates css into common JS
          'css-loader',
          'postcss-loader',
          // complies sass to css
          'sass-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        exclude: [/node_modules/],
        type: 'asset/resource',
        parser: {
          dataUrlCondition: {
            // 크기가 8kb 미만인 파일은 inline 모듈로 처리되고 그렇지 않으면 resource 모듈로 처리됩니다.
            maxSize: 4 * 1042,
          },
        },
        // generator: {
        //   publicPath: './assets/',
        //   outputPath: './assets/',
        // },
      },
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: 'babel-loader',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        exclude: [/node_modules/],
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    /**
     * 개발할 때 API 서버주소,
     * 배포했을 때 API 서버주소를 설정하는 Plugin
     */
    // new DefinePlugin({
    //   NODE_ENV: 'development',
    // }),
    new BannerPlugin({
      banner: `Build Date: ${new Date().toLocaleString()}
      Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
      Author: ${childProcess.execSync('git config user.name')}`,
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      templateParameters: {
        env: isDevMode ? '개발용' : '배포용',
      },
      minify: !isDevMode
        ? {
            collapseWhitespace: true,
            removeComments: true,
          }
        : false,
    }),
    ...(!isDevMode
      ? [
          new MiniCssExtractPlugin({
            filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
            chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',
          }),
        ]
      : []),
  ],
};

결론

즉 정리하자면,

1. 개발모드일 때 정적 이미지 파일을 참조하도록 설정을 어떻게 해야하나요?

2. 왜 build할 땐 이미지 파일이 코드에서 사용중인 것만 빌드 되나요?

답변 주시면 감사하겠습니다.