context

설정에서 엔트리 포인트와 로더를 확인하기 위한 절대 경로의 기본 디렉터리.

const path = require('path');

module.exports = {
  //...
  context: path.resolve(__dirname, 'app'),
};

entry

entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로다.

entry: string | [string]

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

여기서 entry 값은 축약된 표현이다.
entry에 경로를 주는 것은

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

이렇게 준 경우 output에서 파일이름에 main.[name].js와 같이 name으로 사용 가능

엔트리 배열

entry 속성에 파일 경로를 배열로 전달할 수 있습니다. 이는 여러 의존성 파일을 한 번에 주입하고 해당 의존성을 하나의 "청크"에 그래프로 표시하려는 경우에 유용합니다.

module.exports = {
	entry: ['./src/file_1.js', './src/file_2.js'],
};

엔트리 객체

객체 구문은 상당히 장황해 집니다.. 그러나, 이는 애플리케이션에서 엔트리를 정의하는 가장 확장 가능한 방법입니다.

 entry: { <entryChunkName> string | [string] } | {}  
 

  module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

EntryDescription object

엔트리 포인트 설명이 있는 객체입니다

• dependOn: 현재 엔트리 포인트가 의존하는 엔트리 포인트. 이 엔트리 포인트를 로드하기 전에 로드해야 합니다.

• filename: 디스크에 있는 각 출력 파일의 이름을 지정합니다.

• import: 시작 시 로드되는 모듈입니다.

• library: 현재 엔트리에서 라이브러리를 번들링하려면 라이브러리 옵션을 지정합니다.

• runtime: 런타임 청크의 이름입니다. 설정되면 이 이름의 런타임 청크가 생성되고 그렇지 않으면 기존 엔트리 포인트의 이름이 사용됩니다.

• publicPath: 브라우저에서 참조할 때 이 엔트리의 출력 파일에 대한 공용 URL 주소를 지정하세요.

// error1 -> runtime과 dependOn은 단일 엔트리에 함께 사용
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

// error2 -> 순환 참조
module.exports = {
  entry: {
    a3: {
      import: './a',
      dependOn: 'b3',
    },
    b3: {
      import: './b',
      dependOn: 'a3',
    },
  },
};

// example2
module.exports = {
  //...
  entry: {
    home: './home.js',
    shared: ['react', 'react-dom', 'redux', 'react-redux'],
    catalog: {
      import: './catalog.js',
      filename: 'pages/catalog.js',
      dependOn: 'shared',
      chunkLoading: false, // 요청 시 로드되는 청크를 비활성화하고 모든 것을 기본 청크에 넣습니다.
    },
    personal: {
      import: './personal.js',
      filename: 'pages/personal.js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true, // 요청 시 로드되는 비동기 청크 생성
      layer: 'name of layer', // 엔트리 포인트에 대한 레이어 설정
    },
  },
};