Skip to content

Kyunghwa Yoo

Webpack Loader

2017. 10. 14 — Webpack, javascript — 1 min read

Webpack Loader

webpack can only process Javascript natively, but loaders are used to transform other resources into Javascript. By doing so, every resource forms a module

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

1module.exports = {
2    entry: {
3        // …
4    },
5    output: {
6        // …
7    },
8    module: {
9        rules: [
10            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
11        ]
12    }
13};

번들링을 할 때 파일별로 특정 동작을 실행하게 하는 것이 module의 역할
rules 밑에 있는 것들이 loader 이다.
loader에서 모듈 로딩 순서는 배열의 요소 오른쪽에서 왼쪽 으로 진행된다.

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

위 설정 파일을 webpack으로 번들링 한 결과물은 아래와 같다.

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

Babel Loader

preset: Babel 플러그인 리스트
Tree Shaking: 모듈에서 사용되지 않는 것들은 추가하지 않는 것

1// .babelrc
2{
3    presets: ['react', 'es2015']
4}

babel은 old 브라우저 들에서 최신 ES6 문법이 동작하도록 트랜스컴파일 해주는 컴파일러