Webpack Loader

• Webpack은 자바스크립트 파일만 처리가 가능하도록 되어 있음
• loader를 이용하여 다른 형태의 웹 자원들을(img, css, …) js로 변환하여 로딩

  module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
  };
  

• loader에서 모듈 로딩 순서는 배열의 요소 오른쪽에서 왼쪽으로 진행

  {
    test: /backbone/,
    use: [
        'expose-loader?Backbone',
        'imports-loader?_=underscore,jquery'
        // 순서대로 (1) jquery, (2) underscore 로딩
    ]
  }
  

• 위 설정 파일을 webpack으로 번들링 하면

  var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;
  var _ = __webpack_require__(0);
  var jquery = __webpack_require__(1);
  

Babel Loader

• Babel이 필요한 이유
  • 아직까지 브라우저가 모든 ES6문법을 인식하지 못함 (ES5)
  • Babel은 브라우저가 ES6문법을 인식하게 하기 위한 컴파일 작업을 해줌
• preset : Babel 플러그인 리스트

  module: {
    rules: [{
        test: /\.js$/,
        use: [{
            loader: 'babel-loader',
            options: {
                presets: [
                    ['es2015', 'react', {modules: false}]   // Tree Shaking : 사용하지 않는 모듈은 넣지 않는다.
                ]
            }
        }]
    }]
  }