[Webpack] file-loader

  Javascript에서는 ESM, commonJs 를 통하여 다른 JS파일에서 내보낸 함수나, 객체등을 가져올 수 있다. 

//index1.js
const obj = require('./index2.js');
console.log(obj.name);

//index2.js
const obj = {name: 'from index2'};
module.exports = obj;

이렇게 index1.js, index2.js 파일을 만들고 node js로 실행해보면 name이 정상적으로 출력되는 것을 확인할 수 있다.

node js에서는 아직은 experimental module로 ESM을 지원하기 때문에, 특별한 설정을 하지 않으면 ESM을 사용할 수 없기에 CommonJs를 이용했다.

 

물론 ESM과 commonJs 는 javascript에 한해서만 작동하는 기능이다. 그렇기 때문에 아래와 같이 .png 파일을 포함시킬려고 하면 당연히 오류가 발생한다. 

const Icon = require('../static/Icon.png');
console.log(Icon);

하지만 Webpack을 이용하면 이 .png 파일의 경로를 자바스크립트의 파일에 포함시킬 수 있다.

 

mkdir prac

cd prac

npm init -y

npm install webpack webpack-cli file-loader

 

이렇게 프로젝트를 하나 생성한다.

 

그림파일을 하나 준비한 뒤 ./static 폴더를 생성해서 Icon이라는 이름으로 복사한다. 그리고 ./src 폴더를 생성해 index.js 파일을 만든 뒤 아래와 같이 코드를 입력한다.

const Icon = require('../static/Icon.png');
console.log(Icon);

당연히 node src/index.js 이렇게 실행하면 오류가 나면서 실행되지 않는다. 

 

./webpack.config.js 파일을 생성한 뒤 아래와 같이 코드를 입력해보자.

const path = require('path');
module.exports = {
  entry: {
    main : './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]?[hash]',
        },
      },
    ],
  }
};

 

웹팩은 javascript 파일과 JSON 파일만 모듈로 묶을 수 있다. 하지만 file-loader과 같은 로더를 통해서, javascript와 JSON외의 다른 확장자의 파일들으 모듈로 변환하여 묶을 수 있다.

 

module.rules를 통해 로더를 설정해줄 수 있다. test: 는 모듈의 확장자를 지정해주고 이에 대해 loader: 는 그 확장자에 대해 사용할 로더를 지정해준다. 또한 options: 를 사용하여 추가 옵션을 지정해줄 수 있다.

 

여기서는 정규표현식을 사용하여 .png 파일에 대해 file-loader을 사용하는 규칙을 생성하였다. 그리고 Webpack에서 이 png파일을 번들링할때의 파일 경로를 options.name 프로퍼티를 통해 설정해 줄 수 있다. 

 

이제 콘솔 창에서 

npx webpack 

으로 웹팩을 실행시켜보자.

이렇게 dist 폴더가 새로 생성되고 그아래 static 폴더가 생성되어 Icon.png 파일이 복사된다.

 

그리고 이제 node dist/main.bundle.js 명령어로 js파일을 실행해보면 

webpack의 options.name 에서 설정한 바와 같이 Icon.png 파일의 경로가 번들링 된 것을 확인 할 수 있다. 

 

이번에는 options.name 에서 [path]를 지워보자

const path = require('path');
module.exports = {
  entry: {
    main : './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]?[hash]',
        },
      },
    ],
  }
};

그리고 dist 폴더를 지운뒤 npx webpack 을 입력하여 웹팩을 실행해보자.

 

그러면 

이번에는 static 폴더가 생성되지 않고 그냥 dist 폴더 아래에 Icon.png 파일만 복사되는 것을 확인할 수 있다. 

node dist/main.bundle.js 이렇게 실행하면, 

Webpack에서 반환한 값은 static/Icon.png?... 이 아닌 그냥 Icon.png?... 인 것을 확인할 수 있다. 

 

결론적으로 file-loader의 option.name 설정은 특정 파일을 모듈로 가져올때 반환되는 값을 설정하는 것이고, 그 값대로 output의 파일들의 경로가 설정된다고 할 수 있다.