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

작성한 질문수

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

webpack-dev-server 사용시 image 로드 실패

작성

1.3K

webpack-dev-server를 사용시 image 파일을 수업영상에서는 문제가 없는데

제가 따라하고 있는 연습 프로젝트에서는 제대로 로드하지 못하고 있습니다ㅜㅜ

src/index.scss

body {
  background-image: url('./img/lolche.png');
  background-size: cover;
}

src/app.js

import './index.scss'

webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('./dist')
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          process.env.NODE_ENV === 'production'
          ? MiniCssExtractPlugin.loader
          : 'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.png$/,
        loader: 'url-loader', 
        options: {
          publicPath: './dist/',
          name: '[name].[ext]',
          limit: 10000
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: () => `빌드 날짜: ${new Date().toLocaleString()}`
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? 'development' : 'production'
      },
      minify: process.env.NODE_ENV === 'production' ? {
        removeComments: true
      } : false
    }),
    // new CleanWebpackPlugin(),
    ...(
      process.env.NODE_ENV === 'production'
      ? [new MiniCssExtractPlugin({filename: `[name].css`})]
      : []
    )
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    publicPath: "/"
  }
}

npm rub build시 문제없이 html, css, js, png 파일이 /dist 폴더 내에 생성되는데

npm start로 실행시 다른 건 다 문제가 없는데 image 파일을 제대로 불러오지 못합니다

GET http://localhost:8080/dist/lolche.png 404 (Not Found)

콘솔창에 위와 같은 에러를 뿜는데

제가 뭐를 잘못했을까요?

nodejs eslint babel 웹팩

답변 3

김정환

지식공유자

웹팩 개발 서버를 사용하게되면 contentBase라는 옵션을 사용할수 있는데요 지정한 값에 따라서 서버가 제공할 정적파일 경로를 설정할 수 있습니다.

작성하신 코드를 보면 웹팩 빌드 결과인 dist 폴더를 기준으로 서버가 실행될 겁니다.

devServer: {
    contentBase: path.join(__dirname, "dist"),
    publicPath: "/"
}

그렇기 때문에 파일 로더에 설정한 publicPath의 '/dist ' 값을 제거해 주어야 되요. 개발서버는 dist 폴더를 기준으로 파일을 찾기 때문에 dist 값을 불필요한거죠.

options: {
  // publicPath: './dist',
  name: '[name].[ext]',
  limit: 10000
}

수정한 커밋 깃헙에 올려드릴라고 했는데 권한이 없어서 못 올려드렷어요

질문자

김정환

지식공유자

webpack-dev-server를 구동하면고 loche.png 파일을 요청하면 그렇다는 거죠? 코드에 이상한건 없는것 같은데. 작업하신 파일 전체를 공유해주실수 있어요? 깃헙 링크를 주시면 더 좋고요.

작성한 질문수

전체 Q&A

질문하기