8. 웹팩

8 웹팩

정적자원을 묶어서 하나의 파일또는 여러개의 파일로 번들링해주는 도구

초기로딩 타임을 줄여준다
정적자원들까지 모듈화가 가능
Babel, TS 같은 트랜스파일러와 손쉽게 통합
로더 기능 활용
HMR (Hot Module Replacement)
변경사항을 자동으로 번들링 및 페이지 자동갱신
댜앙한 로더 지원
번들링전 전처리기 기능 제공, 정적자원 변환, ES6 트랜스파일링 등
다양한 플러그인 제공
ex)UglifyJsPlugin -> 코드 난독화 및 미니파이(축소)

Webpack 구성

4가지 설정이 필요.

entry
진입점, 단일 : 문자열, 복수 : 객체타입으로 파일 경로 지정
output
번들링된 결과물,
- path옵션 : output 경로
- filename : 결과물의 파일명
- publicPath : 웹서버에서 이용될 때의 사용 경로 지정
module
프로젝트 내부에서 사용하는 모듈의 수행방법 명시
1. rules : 룰을 하나하나 지정
  1. test : /.js$/ -> js 끝나는 파일명에 대해 테스트 수행
  2. loader : 'babel-loader' -> 바벨을 이용해 트랜스파일 하도록 지정
  3. exclude : /node_modules/ -> 트랜스파일링에서 node_modules는 제외
plugins
빌드에서 추가작업을 하기 위함
ex) UglifyJsPlugin : 코드 난독화 및 사이즈 축소 작업 실행

구성예제

모듈 설치

Webpack 전역 설치
```
sudo npm i -g webpack
```
Webpack 개발 의존성 설치
```
npm i --save-dev webpack
```

Babel 설치

npm i --save-dev babel babel-core babel-loader babel-preset-es2015

Webpack 설정

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: {
    main: __dirname + '/src/index/js'
  },
  output: {
    path: __dirname + '/public/dist/',
    filename: '[name].js',
    publicPath: '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

package.json

{
  ...
  "scripts": {
    "build": "webpack",

  },
  ...
}

예제 코드

// index.js
// import calc from "./util/utility";
const calc = require('./util/utility');
let x = 5;
let y = 10;
let str = `<h2>${x}+${y} = ${calc.add(x, y)}</h2>`;
document.getElementById('app').innerHTML = str;
console.log(str);  

// util/utility.js
let cacl = {
  add(x, y) {
    return x + y;
  },
  multiply(x, y) {
    return x * y;
  }
};

module.exports = cacl;  
//export default calc

HTML
```html <!DOCTYPE html>
Title
</body>
</html> ``

build

$ npm run build  # 첨에하니 에러남

webpack-cli

npm i -D webpack-cli # -D 개발환경에서만 실행, 필요하다해서 깔음

new webpack.optimize.UglifyJsPlugin() 삭제됨... 실행안됨..

// webpack.config.js 추가 설정 
module.exports = {
  ...
  optimization :{
    minimize: true
  },
  mode: 'none'

  ...
}

수정한 webpack.config.js

var webpack = require('webpack');
module.exports = {
entry: {
  main: __dirname + '/src/index.js'
},
output: {
  path: __dirname + '/public/dist/',
  filename: '[name].js',
  publicPath: '/dist'
},
module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }
  ]
},
plugins: [],
mode: 'none',
optimization: {
  minimize: true
}
};

bable 버전 6.x -> babel-loader 7.x 필요.. 8.x로하니 에러남 babel-loader 버전 8.x -> 7.x로 변경

{
  ...
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
  ...
}

변경사항 자동 갱신 Node, Express 기반 개발용서버, HMR 기능 자체 제공 -> 빠른 개발, 수정 및 npm run build 작업x
- webpack-dev-server 설치
  $ npm i --save-dev webpack-dev-server
- package.json 스크립트 추가
  "scripts":{ "start": "node_modules/.bin/webpack-dev-server --open --hot", }
- webpack.config.js devServer 옵션추가
  1. contentBase : 웹서버 루트 설정. 생략 : 프로젝트 디렉터리
  2. port : 포트 번호설정. 기본 8080
  3. historyApiFallback : 브라우저 이전상태로 이동할 때, URI 존재x 404에러 -> 기본페이지로 이동 시킬지 여부설정
    module.exports = { ... devServer:{ contentBase:'./public/', port:3000, historyApiFallback: true } ... }
- 주의
  public에 빌드되서 배포가 되지는 않음. 배포시에는 build 작업이 필요해 보임

실행

# node node_modules/.bin/webpack-dev-server --open --hot
$ npm run start

Vue-cli 보일러플레이트

보일러플레이트(boilerplate)란

최소한의 변경으로 재사용할 수 있는 것
적은 수정으로 여러곳 활용 가능한 코드
문서에서 반복적으로 인용되는 문석의 한 부분
핵심은 반복되고 자주쓰이는 것을 자동화.

Previous4. 이벤트처리 Next자바스크립트 디자인패턴

Last updated 5 years ago

Was this helpful?

8 웹팩

정적자원을 묶어서 하나의 파일또는 여러개의 파일로 번들링해주는 도구

초기로딩 타임을 줄여준다

정적자원들까지 모듈화가 가능

Babel, TS 같은 트랜스파일러와 손쉽게 통합

로더 기능 활용

HMR (Hot Module Replacement)

변경사항을 자동으로 번들링 및 페이지 자동갱신

댜앙한 로더 지원

번들링전 전처리기 기능 제공, 정적자원 변환, ES6 트랜스파일링 등

다양한 플러그인 제공

ex)UglifyJsPlugin -> 코드 난독화 및 미니파이(축소)

Webpack 구성

4가지 설정이 필요.

entry

진입점, 단일 : 문자열, 복수 : 객체타입으로 파일 경로 지정

output

번들링된 결과물,

path옵션 : output 경로
filename : 결과물의 파일명
publicPath : 웹서버에서 이용될 때의 사용 경로 지정

module

프로젝트 내부에서 사용하는 모듈의 수행방법 명시

rules : 룰을 하나하나 지정
1. test : /.js$/ -> js 끝나는 파일명에 대해 테스트 수행
2. loader : 'babel-loader' -> 바벨을 이용해 트랜스파일 하도록 지정
3. exclude : /node_modules/ -> 트랜스파일링에서 node_modules는 제외

plugins

빌드에서 추가작업을 하기 위함

ex) UglifyJsPlugin : 코드 난독화 및 사이즈 축소 작업 실행

구성예제

모듈 설치

Webpack 전역 설치

sudo npm i -g webpack

Webpack 개발 의존성 설치

npm i --save-dev webpack

Babel 설치

npm i --save-dev babel babel-core babel-loader babel-preset-es2015

Webpack 설정

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: {
    main: __dirname + '/src/index/js'
  },
  output: {
    path: __dirname + '/public/dist/',
    filename: '[name].js',
    publicPath: '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

package.json

{
  ...
  "scripts": {
    "build": "webpack",

  },
  ...
}

예제 코드

// index.js
// import calc from "./util/utility";
const calc = require('./util/utility');
let x = 5;
let y = 10;
let str = `<h2>${x}+${y} = ${calc.add(x, y)}</h2>`;
document.getElementById('app').innerHTML = str;
console.log(str);  

// util/utility.js
let cacl = {
  add(x, y) {
    return x + y;
  },
  multiply(x, y) {
    return x * y;
  }
};

module.exports = cacl;  
//export default calc

HTML

```html <!DOCTYPE html>

Title

</body>

</html> ``

build

$ npm run build  # 첨에하니 에러남

webpack-cli

npm i -D webpack-cli # -D 개발환경에서만 실행, 필요하다해서 깔음

new webpack.optimize.UglifyJsPlugin() 삭제됨... 실행안됨..
참고 :

mode 설정 Webpack 버전4부터 조금 바뀐거 같아서 공식문서 ㄱ, mode 설정이 필수 참고 : 1. development 2. production 3. none

// webpack.config.js 추가 설정 
module.exports = {
  ...
  optimization :{
    minimize: true
  },
  mode: 'none'

  ...
}

수정한 webpack.config.js

var webpack = require('webpack');
module.exports = {
entry: {
  main: __dirname + '/src/index.js'
},
output: {
  path: __dirname + '/public/dist/',
  filename: '[name].js',
  publicPath: '/dist'
},
module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }
  ]
},
plugins: [],
mode: 'none',
optimization: {
  minimize: true
}
};

bable 버전 6.x -> babel-loader 7.x 필요.. 8.x로하니 에러남 babel-loader 버전 8.x -> 7.x로 변경

{
  ...
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
  ...
}

build 결과물 (main.js)

변경사항 자동 갱신 Node, Express 기반 개발용서버, HMR 기능 자체 제공 -> 빠른 개발, 수정 및 npm run build 작업x

webpack-dev-server 설치
```
$ npm i --save-dev webpack-dev-server
```

package.json 스크립트 추가

"scripts":{
"start": "node_modules/.bin/webpack-dev-server --open --hot",
}

webpack.config.js devServer 옵션추가
1. contentBase : 웹서버 루트 설정. 생략 : 프로젝트 디렉터리
2. port : 포트 번호설정. 기본 8080
3. historyApiFallback : 브라우저 이전상태로 이동할 때, URI 존재x 404에러 -> 기본페이지로 이동 시킬지 여부설정
  module.exports = { ... devServer:{ contentBase:'./public/', port:3000, historyApiFallback: true } ... }
주의
public에 빌드되서 배포가 되지는 않음. 배포시에는 build 작업이 필요해 보임

실행

# node node_modules/.bin/webpack-dev-server --open --hot
$ npm run start

Vue-cli 보일러플레이트

보일러플레이트(boilerplate)란

최소한의 변경으로 재사용할 수 있는 것

적은 수정으로 여러곳 활용 가능한 코드

문서에서 반복적으로 인용되는 문석의 한 부분

핵심은 반복되고 자주쓰이는 것을 자동화.