웹 팩 4 서로 다른 내 보 내기 형식 구현

웹 팩 의 가장 기본 적 인 설정 은 정적 인 대상 을 내 보 내 는 것 입 니 다.그러나 우리 의 업무 가 복잡 하기 때문에 목표 코드 를 구축 하기 위해 웹 팩 을 동적 으로 설정 해 야 합 니 다.
다행히도 웹 팩 은 웹 팩 파일 을 동적 으로 설정 하 는 지원 을 제공 합 니 다.
웹 팩 의 다양한 설정 유형 을 소개 합 니 다.
1.대상 으로 내 보 내기(Object)
웹 팩 에서 가장 흔히 볼 수 있 는 설정 형식 은 대상 내 보 내기 입 니 다.즉,

const path = require('path')
module.exports = {
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 }
}

2.함수 로 내 보 내기(Function)
한 대상 으로 내 보 내 는 것 은 유연성 이 부족 하 다 는 것 이 분명 하 다.만약 우리 가 서로 다른 개발 환경 에 따라 다른 코드 를 구축 하고 싶다 면.이 때 웹 팩 설정 도 바 뀌 어야 합 니 다.
따라서 웹 팩 은 함수 내 보 내기 를 지원 합 니 다.이 내 보 내기 함수 의 기본 매개 변 수 는 env 와 argv 입 니 다.그 중에서 env 는 환경 대상 입 니 다.명령 행 을 통 해 설정 할 수 있 습 니 다(webpack 은 이 설정 을 자동 으로 읽 을 수 있 습 니 다).argv 는 명령 행 에 매개 변 수 를 입력 하 는 map 입 니 다.
(1)--env 매개 변 수 는 다양한 설정 을 지원 합 니 다.
Invocation
Resulting environment
notes
webpack --env prod
"prod"
env 는 String 형식 이 고,값 은 prod 입 니 다.
webpack --env.prod
{ prod: true }
env 는 대상 이 고,prod 는 대상 의 속성 이 며,기본 값 은 true 입 니 다.
webpack --env.prod=1
{ prod: 1 }
env 대상,prod 는 대상 의 속성,할당 값 은 1 입 니 다.
webpack --env.prod=foo
{ prod: "foo" }
env 대상,prod 는 대상 의 속성,할당 값 은 foo 입 니 다.
webpack --env.prod --env.min
[ prod: true, min: true ]
env 는 대상 이 고 prod 와 min 은 대상 의 속성 이 며 기본 값 은 true 입 니 다.-env 명령 은 여러 번 사용 할 수 있 으 며 덮어 쓰 지 않 습 니 다.
webpack --env.prod --env min
[{ prod: true }, "min"]
env 는 배열 이 고 첫 번 째 배열 요 소 는 대상 이 며 prod 는 그 속성 이 며 기본 값 은 true 입 니 다.두 번 째 배열 요 소 는 String 이 고 할당 값 은 min 입 니 다.
webpack --env.prod=foo --env.prod=bar
{ prod: ["foo", "bar"] }
env 를 대상 으로 프로 드 는 대상 의 속성 입 니 다.prod 는 하나의 배열 로 첫 번 째 배열 요 소 는'foo'이 고 두 번 째 배열 대상 은'bar'이다.이 경우 에 도 prod 값 은 덮어 쓰 지 않 고 배열 로 바 뀌 는 것 을 주의 하 십시오.
(2)argv 는 웹 팩 명령 행 인자 의 map 입 니 다.
예 를 들 어,우 리 는 명령 행 에 웹 팩--entry-filename=index 를 입력 하면 웹 팩 설정 파일 에서 argv[entry-filename]을 통 해 명령 행 설정 의 값 을 가 져 올 수 있 습 니 다.즉:
argv["entry-filename"] === "index"
(3)예 를 들 면:

const path = require('path')

module.exports = function (env, argv) {
 return {
  entry: './src/' + argv['entry-filename'] + '.js',
  output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist'),
  },
  devtool: env.prod ? 'source-map' : 'eval'
 }
}

명령 행 에서 우 리 는 스스로 입력 해 야 한다.

webpack --env.prod --entry-filename=index

웹 팩 설정 파일 에 사용 되 는 명령 행 인자,예 를 들 어 argv["entry-filename"]는 명령 행 에 입력 해 야 합 니 다.하 나 를 빠 뜨 려 서 는 안 됩 니 다.그렇지 않 으 면 웹 팩 이 잘못 보고 할 수 있 습 니 다.Config did not export an object
3.Promise 대상 으로 내 보 내기
함수 로 내 보 내 는 것 외 에 웹 팩 은 다른 단계 에서 설정 변 수 를 가 져 와 서 관련 파일 을 설정 하 는 것 도 지원 합 니 다.(정말 강하 다!)
비동기 적 으로 데 이 터 를 얻 는 과정 을 나타 내기 위해 웹 팩.config.js 를 다음 과 같은 내용 으로 수정 합 니 다.

const path = require('path')
module.exports = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve({
    entry: './src/index.js',
    output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
    }
   })
  }, 1000)
 })
}

4.여러 설정 내 보 내기
웹 팩.config.js 를 수정 하 는 내용 은 다음 과 같 습 니 다.

const path = require('path')

module.exports = [
 {
  name: 'index',
  entry: './src/index.js',
  output: {
   filename: 'index.js',
   path: path.resolve(__dirname, 'dist')
  },
  mode: 'production'
 },
 {
  name: 'main',
  entry: './src/main.js',
  output: {
   filename: 'main.js',
   path: path.resolve(__dirname, 'dist')
  }
 }
]

웹 팩 을 실행 할 때,상기 여러 설정 이 구 축 됩 니 다.만약 우리 가 그 중의 코드 만 구축 하고 싶다 면--config-name 인자 만 입력 하면 됩 니 다.
webpack --config-name=index
webpack --config-name=main
위 에서 보 듯 이 저 희 는 name 이 index 이 고 name 이 main 인 설정 대상 이 설정 한 내용 을 각각 구축 할 수 있 습 니 다.
상기 설정 에서 흔히 볼 수 있 는 장면 은 npm 패키지 가 서로 다른 모듈 문법 으로 서로 다른 출력 파일 을 구축 하여 서로 다른 프로젝트 에 사용 할 수 있 도록 합 니 다.

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',
}]

한 마디 로 하면 웹 팩 은 우리 에 게 많은 유연 한 설정 솔 루 션 을 제공 해 주 었 다.우리 가 복잡 한 프로젝트 를 만 났 을 때 마음의 수 요 를 명 확 히 하면 대부분 해당 하 는 해결 방안 을 찾 을 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.