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

Question

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) 콘솔창에 위와 같은 에러를 뿜는데 제가 뭐를 잘못했을까요?

jeonghwan · Answer

웹팩 개발 서버를 사용하게되면 contentBase라는 옵션을 사용할수 있는데요 지정한 값에 따라서 서버가 제공할 정적파일 경로를 설정할 수 있습니다.  작성하신 코드를 보면 웹팩 빌드 결과인 dist 폴더를 기준으로 서버가 실행될 겁니다. devServer: { contentBase: path.join(__dirname, "dist"), publicPath: "/" } 그렇기 때문에 파일 로더에 설정한 publicPath의 '/dist ' 값을 제거해 주어야 되요.  개발서버는 dist 폴더를 기준으로 파일을 찾기 때문에 dist 값을 불필요한거죠.  options: { // publicPath: './dist', name: '[name].[ext]', limit: 10000 } 수정한 커밋 깃헙에 올려드릴라고 했는데 권한이 없어서 못 올려드렷어요

KE · Answer

.

jeonghwan · Answer

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