웹팩의 Entry, Output, Loader, Plugin

Entry

웹팩에서 특정 웹서비스를 변환하기 위해 설정하는 진입점으로 자바스크립트의 파일 경로입니다.

module.exports = {
  entry: './src/index.js'
}

webpack.config.js에서 위와 같이 설정을 할 시 웹팩을 실행했을 때 src 폴더안에 있는 index.js 진입점으로 웹팩이 빌드를 수행합니다.

엔트리의 여러가지 진입점

엔트리는 여러가지의 진입점을 설정 할 수 있습니다.

module.exports = {
    entry: {
      login: './src/LoginView.js',
      main: './src/MainView.js'
    }
}

위와 같이 엔트리 포인트를 분리하는 경우는 싱글 페이지 애플리케이션이 아닌 특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 멀티 페이지 애플리케이션에 적합합니다.

Output

웹팩으로 변환된 파일들이 생성되는 파일 경로입니다.

module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

Output 파일 이름 옵션

앞에서 살펴본 filename 속성에 여러 가지 옵션을 넣을 수 있습니다.

module.exports = {
  output: {
    filename: '[name].bundle.js'
  }
};

1. 결과 파일 이름에 entry 속성을 포함하는 옵션

module.exports = {
  output: {
    filename: '[id].bundle.js'
  }
};

1. 결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션

module.exports = {
  output: {
    filename: '[name].[hash].bundle.js'
  }
};

1. 매 빌드시 마다 고유 해시 값을 붙이는 옵션

module.exports = {
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

1. 웹팩의 각 모듈 내용을 기준으로 생생된 해시 값을 붙이는 옵

빌드를 할 때마다 filename에 고유한 값들을 넣어 줄 수 있습니다.

Loader

웹팩이 웹 서비스를 변환을 시도 할 때 자바스크립트가 아닌 파일들을 변환할 수 있도록 도와주는 속성입니다.

module.exports = {
  module: {
    rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }]
  }
}

엔트리나 아웃풋 속성과는 다르게 module라는 이름을 사용합니다. test 항목은 어느 확장자에 로더를 적용 시킬 것인지 정해주는 역할입니다. 위와 같은 코드는 모든 css 파일이라고 보시면됩니다. 그다음 use는 어떤 로더를 사용 할 것인가를 정합니다. (배열안에서 오른쪽부터 읽기 시작함)

Plugin

플러그인 윕팩이 동작할 때 추가적인 기능을 넣을 수 있는 속성입니다. 즉 플러그인은 웹팩으로 빌드한 결과물의 형태를 바꾸는 역할을 합니다.

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.ProgressPlugin()
  ]
}

위의 두 플러그인은 각각 아래와 같은 역할을 합니다.

• HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
• ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인

참고:https://joshua1988.github.io/webpack-guide/concepts/plugin.html