웹팩의 로더사용(webpack Loader)
(https://webpack.js.org/guides/asset-management/ - 번역)
1. 로더란?
- 프론트엔드 개발을 하면서 필요한 자원들(images, css, font, json....)을 관리하기 위해 필요하다
- 웹팩에서는 모든 파일을 모듈 단위로 다룬다. 그리고 이런 모듈을 동적으로 묶음으로서 파일간의 의존관리를 하고 필요없는 파일은 제외시킬 수 있다.
2. Loading CSS
1) 설치
npm install --save-dev style-loader css-loader2) webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};- 원하는 파일에 css 파일을 import 시키면 사용 가능하다.
- webpack 내부적으로 모듈화 시킬 때 <head> 에 자동으로 인젝션한다.
3) style.css
.hello {
color: red;
}4) index.js
import _ from 'lodash';
+ import './style.css';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ element.classList.add('hello');
return element;
}
document.body.appendChild(component());5) npm run build
3. 기타로더
- image, font, json, xml..... 사이트에서 확인가능하다.
'Tools > webpack' 카테고리의 다른 글
| [webpack] 웹팩 멀티 번들관리 (0) | 2018.06.21 |
|---|---|
| [webpack] 웹팩 기본 사용법 - webpack HelloWorld (0) | 2018.05.15 |
리딩리드