Webpack

Webpack이란?

모듈 번들러이다 즉, 하나의 파일에서 연결하고 있는 무수히 많은 파일들을 하나로 묶어주어 한개의 파일로 새롭게 만드는 프로그램이다.

왜하나로 만들까?

파일들이 여러개로 분산되어 있으면 페이지에 들어갈 때 마다 서버는 js파일들과 필요한 파일들을 보낸다.이렇게 되면 페이지를 보여주기 위해 여러번 서버와 통신하게 되어 네트워크 비용이 많이들어 비효율적이다.
각 파일의 변수 충돌 위험성도 존재한다.

Webpack의 중요속성 5가지

1) Entry
entry 는 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점 이자 자바스크립트 파일 경로 입니다. 웹팩은 entry 를 통해서 모듈을 로딩하고 하나의 파일로 묶습니다.
Default value : ./src/index.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

2) Output
웹팩에서 entry 로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치입니다.
Default value : ./dist/index.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

3) Loader
웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있습니다. 자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성입니다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

4) Plugins
plugin 은 웹팩의 기본적인 동작 외 추가적인 기능을 제공하는 속성입니다. loader 는 파일을 해석하고 변환하는 과정에 관여하고, plugin 은 결과물의 형태를 바꾸는 역할을 합니다.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

5) Mode
mode 구성 옵션은 웹팩에 내장된 최적화를 사용하도록 지시합니다.
development, production, none

Default value : production

module.exports = {
  mode: 'production'
};