웹펙 - 설치와 실행

Webpack

: 여러개의 js 파일이 의존관계 (서로 부르고 부르는 관계) 경우 하나로 모아주는 역할을 한다.

하나로 모아진 것을 bundle 이라고 한다. (webpack = bundler) 

 

webpack-cli : webpack을 터미널 명령어로 실행할 수 있는 패키지

 

설치 :

npm install -D webpack webpack-cli

> webpack과 webpack-cli 설치

> -D 옵션은 개발용 패키지로 설치되며, devDependencies 안에 설치된다.

> -D 옵션이 없는 경우, dependencies 안에 설치됨.

 

 

 

webpack 옵션

1. --mode : 개발/운영 선택해서 배포할 수 있다. ("development" / "production" / "none") (필수)
2. --entry : module의 시작점. (js 참조의 시작점 - 필수)
3. --output, -o : 결과 저장하는 경로 설정 옵션 (필수)
4. --config : webpack 설정파일 경로 지정. (webpack.config.js)

 

 

node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist/main.js

> webpack 개발모드, 시작점은 app.js , 결과저장은 main.js  -> main.js 가 생성되고, html 에서 호출

 

<script src="/dist/main.js"></script>    //mode는 없앤다. (모든 브라우저에서 모듈 실행 가능)

 

 

 

 

 

webpack.config.js 

: webpack 설정 파일 - node_modules 명령어로 실행하는 부분을 설정파일로 저장해서 npm으로 실행하게 설정.

 

ex) 

const path = require('path'); 
module.exports = { 
    mode : 'development', 
    entry :{ 
        main : './src/app.js', 
        main2 : './src/app2.js', 
    }, 
    output :{ 
        path : path.resolve('./dist'),   
            //output 디렉토리 경로 (절대경로 입력) (node - path 모듈 호출) 
        filename : '[name].js'  
            // [name] = entry에서 설정한 키값으로 치환된다. -> entry가 여러개인 경우, 여러개의 output 이름을 동적으로 만들 수 있음. 
    } 
}

 

 

 

npm 으로 webpack build 하려고 하는 경우,

package.json 에서 "build" : "webpack" 으로 변경하면, npm 에서 webpack을 찾아 실행한다.

(build 안에 npm 명령어 모두 명시안해도 작동한다.)

:

npm run build