Webpack Config

‘Webpack 기초 따라하기’를 진행하면서 webpack.config.js 파일을 구성하면 다음과 속성들이 등장합니다.
각 속성들이 어떤 의미를 가지고 있는지 알아봅시다.

entry

‘Webpack’이 파일을 읽어들이기 시작하는 부분(진입점).
require, @import 등 모듈간의 의존성을 해석하며 의존성 트리를 생성, 하나 이상의 진입 포인트를 설정할 수 있습니다.

{
  entry: './src/app.js'
}

// 하나 이상의 진입 포인트 설정
{
  entry: [
    './src/app.js',
    './src/main.js'
  ]
}

// 속성(키)을 사용하여 하나 이상의 진입 포인트를 설정 가능
{
  entry: {
    app: './src/app.js'
  }
}

output

entry에서 설정한 의존성 트리를 바탕으로 결과물(번들)을 반환하는 설정.

output.path: 결과물이 저장될 경로 지정
output.filename: 결과물의 파일 이름 지정

매개변수(parameter) 설정

[name]: entry의 ‘key’ 이름

{
  entry: './src/app.js',
  output: {
    path: '/dist',
    filename: 'app.bundle.js'
  }
}

// 매개변수를 활용하여 번들의 이름 설정
{
  entry: {
    app: './src/app.js'
  },
  output: {
    path: '/dist',
    filename: '[name].bundle.js'
  }
}

resolve

require()로 호출하는 모듈의 해석 방식 설정

resolve.root: 모듈 탐색을 시작할 경로 지정 (default: 'node_modules/')
extensions: 탐색할 모듈의 확장자를 지정

{
  resolve: {
    extensions: ['', '.js', '.css']
  }
}

module

의존성 트리 내의 모듈 처리 방식을 설정.

test: 정규표현식으로 적용되는 파일들을 설정
use: 지정된 ‘loader’가 test에서 적용한 파일을 컴파일
exclude: 컴파일하지 않을 폴더나 파일을 제외
include: 컴파일할 폴더나 파일을 별도 지정

{
  module: {
    rules: [
      {
        // Sass Loader
        test: /\.sass$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader'
          ],
          publicPath: '/dist'
        })
      },
      {
        // Babel Loader
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
}

plugins

번들링 후 결과물의 처리 방식 등을 처리할 다양한 플러그인들을 설정

{
  plugins: [
    // Use EJS Template
    new HtmlWebpackPlugin({
      title: 'Hello Webpack Project!',
      minify: {
        collapseWhitespace: true
      },
      hash: true,
      template: path.join(__dirname, '/src/index.ejs')
    }),
    // Extracting to single file`
    new ExtractTextPlugin('app.css')
  ]
}