[WEBPACK] 웹팩 로더(Loader) 개념 및 동작원리

0. 로더(Loader)란,

webpack이 웹 애플리케이션을 해석할 때, js로 만든 모듈 뿐 아니라, 모든 웹 자원들도 전부 모듈로 봄 import 구문을 사용하면 이 모듈들을 js 코드 안으로 가져올 수 있음. 이 이유는 webpack의 loader의 역할 덕분임 assets 웹 자원 중에서 js 파일이 아닌 HTML, CSS, IMG, FONT 등을 변환할 수 있도록 도와주는 속성

 

   : loader는 Typescript와 같은 다른 언어를 js 문법으로 변환하거나 이미지를 data URL 형식의 문자열로 변환하고, css

파일을 js에서 직접 로딩할 수 있도록 도와줌

 

 

1. 로더의 필요성

webpack으로 애플리케이션을 빌드할 때, import한 웹 자원 파일을 해석하기 위한 적절한 로더가 필요함

 

 

2. 커스텀 로더 작성

  2.1. 로더 파일 생성

/*
*  /root/customloader.js
*/

module.exports = function customloader(content){
    console.log('직접 작성한 커스텀 로더 동작');
    return content;

    //로더가 읽은 파일의 내용이 함수의 파라미터인 content로 전달됨
    //로더를 사용하려면 /root/webpack.config.js 설정파일 module 객체에 추가해야 함
};

 

  2.2. webpack 설정파일 수정 (module.rules 배열에 모듈 추가)

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('./dist'),
    },
    module: {
        rules: [{
            test: /\.js$/,   //.js 확장자로 끝나는 모든 파일
            use: [path.resolve('./customloader.js')]
        }],
    }
}

  - test : 로딩에 적용할 파일 지정

  - use : 이 패턴에 해당하는 파일에 적용할 로더 설정

 

 

  2.3. webpack 실행

    [terminal] npm run build

 

 

[참고] https://joshua1988.github.io/webpack-guide/concepts/loader.html

[참고] http://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html