webpack

모듈 번들러 - 모듈을 묶어준다.

웹 만들때 여러가지 파일이 들어감. 자바스크립트, elss, png 등

이런 것들을 하나의 파일로 혹은 몇개의 파일로 단순하게 묶어주는 프로그램.

기본 필요파일

entry.js - 이곳에 프로젝트에 쓰일 css, js 파일들을 때려박는다.

webpack.config.js - 이 설정 파일을 만들고 필요한 설정을 해준다.

1. node.js 설치

2. npm install webpack -g      웹팩 글로벌하게 설치

3. npm init   로컬하게 패키지 추가하기 위해 해당 폴더로 이동 후 init

4. npm install css-loader style-loader sass-loader --save-dev   필요한 패키기 추가

5. npm install webpack-dev-server -g    서버를 구동할 수 있다. 글로벌하게 설치

6. webpack-dev-server --progress --colors     서버구동 , 번들안의 내용이 바뀔때마다 바로바로 반영

7. npm install url-loader --save-dev   로컬에 url로더 패키지 설치 후 로더추가. - css 배경 경로 잘 나오게함.

entry.js  예제

import './style.scss'
document.write('It works. ');
document.write(require("./content.js"));

webpack.config.js  예제

module.exports= {
    entry: "./entry.js",
    output:  {
        path: __dirname,
        filename: "bundle.js"
    },
    module:  {
        loaders:[
            { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"},
            { test: /\.(png|jpg)$/, loader: 'url-loader' }
        ]
    }
}

loader 는 역순으로 진행.

sass-loader    scss -> css 변환

css-loader   js 안에 css 해석

style-loader   css를 document의 style 태그에 출력