Webpack Configuration

webpack 설정파일은 configuration 객체를 export 한다.

webpack 은 이 설정에 들어간 프로퍼티에 따라 처리한다.

설정은 표준 node js commonjs 모듈이기 때문에 다음을 따를 수 있다.

• 다른 파일을 require 메서드로 import
• npm 라이브러리를 require 메서드로 사용
• 자바스크립트 문법 사용가능
  • 재사용되는 값 변수화
  • 삼항연산자와 같은 표현식 사용가능
  • 설정 일부를 생성하기위해 함수 작성 및 실행

기술적으로 가능하지만 피해야되는 것들은 다음과 같다.

• webpack cli 사용시, cli 로 전달한 인자에 접근하는것.
  • webpack cli 에서 제공하는 옵션을 사용하자.ex: env
• 결정되지 않은 값을 export 하는것
  • 웹팩을 여러번 호출해도 동일한 출력이 생성되어야한다.
• 설정 파일을 너무 길게 작성하는 것
  • 설정파일을 분할하는 것이 좋다.

webpack 은 js 로 작성하기 때문에 여러가지 스타일로 형식화할 수 있다.

Introductory configuration

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
      entry: './foo.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
          filename: 'foo.bundle.js'
    }
}

multiple targets

하나의 객체, 함수, 프로미스를 내보내는 방식과 함께 여러개의 설정을 export 할 수도 있다.
webpack 번들링 시 설정 개수만큼 빌드가 실행된다.
amd 와 cjs 를 동시지원하는 라이브러리 빌드시 유용하다.

module.exports = [
  {
      output: {
        filename: './dist-amd.js',
          libraryTarget: 'amd',
    },
    name: 'amd',
    entry: './app.js',
    mode: 'production'
  },
  {
      output: {
        filename: './dist-commonjs.js',
          libraryTarget: 'commonjs'
    },
    name: 'commonjs',
    entry: './app.js',
    mode: 'production'
  }
]

webpack cli 에서 --config-name 에 name 에 해당하는 값을 전달하면, 해당 설정만 사용해서 번들링을 진행한다.

dependencies

dependencies 프로퍼티를 통해 번들링 순서를 설정할 수도 있다.
webpack.config.js

module.exports = [
  {
      name: 'client',
    target: 'web',
  },
  {
      name: 'server',
    target: 'node',
    dependencies: ['client']
  }
]

parallelism

여러개의 configuration 을 사용하는 경우 parallelism 프로퍼티를 통해 컴파일러 개수를 명시할 수 있다.

webpack.config.js

module.exports = [
  {

  },
  {

  }
]
module.exports.parallelism = 1;