Webpack file-loader 웹팩5 파일로더

CRA 없이 Webpack을 설정하여 작업 진행 중에 이미지를 import 해야 할 일이 생겼는데, 

 

이미지 import를 하기 위해서 별도의 웹팩 설정이 필요했다.

 

Webpack 4버전에서는 file-loader를 이용했지만 Webpack 5 버전 부터는 새로운 모듈이 추가되어 로더 없이 진행 할 수 있었다.

 

웹팩5 assets modules 설정 방법을 찾아봐도 file-loader를 이용한 방법이 대부분..

 

또 빌드를 했을 때 이미지의 폴더구조가 동일해야 했는데 이 조건을 맞추기 위해 어떻게 해야하는지 넘무 어려웠다.

 

먼저 나의 assets 폴더 구조는 아래와 같았다.

 

src / assets / images / 이미지 파일

 

아래 코드는 웹팩의 다른 설정부분들을 제외한 assets 모듈 설정만 남겨놓은것이다.

module.exports = {

	output: {
    	path: path.resolve(__dirname, 'build'),
	    filename: '[name].js',
	    publicPath: '/',
    	assetModuleFilename: pathData => {
	      const filepath = path.dirname(pathData.filename).split('/').slice(1).join('/');
    	  return `${filepath}/[name].[hash][ext][query]`;
	    },
	  },
 	module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource',
      },
      {
        test: /\.jpg/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]',
        },
      },
    ],
  },
}

assetModuleFilename은 함수였던것이다!!!!!!!

 

pathData를 인자로 받아 가공후에 파일경로를 추가해주어 해결했다.

 

참고

https://webpack.js.org/configuration/output/#outputassetmodulefilename

Output | webpack

https://webpack.kr/guides/asset-modules/