webpack-3

명령줄에 웹 패키지를 입력하면 무슨 일이 일어날까요
스크립트 bin/webpack을 실행합니다.js
해석 매개 변수
명령줄에 웹팩을 입력할 때마다 운영체제가 호출합니다./node_modules/.bin/웹 패키지 셸 스크립트입니다.이 스크립트는 호출될 것입니다./node_modules/webpack/bin/webpack.js 및 추가 입력 매개 변수, 예를 들어 -p, -w
yargs 해석 명령행 매개 변수
제3자 모듈yargs를 통해 명령행 매개 변수 분석

1
2
3

var argv = require('yargs').argv

console.log('hello ', argv.name)

명령줄에서 입력 가능

1
2
3

$ hello --name=tom

$ hello --name tom

웹 패키지 명령 뒤에 추가된 출력 디스플레이와 관련된 매개 변수 해석 (Display options)
예를 들어 명령줄에서 자주 입력하는 - w -color -hot 매개 변수
webpack.config.js의 매개 변수
./node_modules/webpack/bin/convert-argv.js,argv의 매개 변수의 값을 판단하여 플러그인을 불러올지 여부를 결정하는 기능

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

if(argv.watch) {
  options.watch = true;
}
// other code

ifBooleanArg("debug", function() {
  ensureArray(options, "plugins");
  var LoaderOptionsPlugin = require("../lib/LoaderOptionsPlugin");
  options.plugins.push(new LoaderOptionsPlugin({
    debug: true
  }));
});

// other code
return options

웹팩config.js의 각 설정 항목을 옵션 대상에 복사합니다
optimist를 통해 사용자가 설정한 웹 패키지입니다.config.js와 셸 스크립트에서 전송된 매개 변수를 옵션 대상으로 통합

1

var options = require("./convert-argv")(yargs, argv)

plugins 플러그인 로드
플러그인을 불러오기 전에 웹팩은 웹팩을 불러옵니다.config.js의 각 설정 항목을 옵션 대상에 복사하고 웹 패키지에 사용자 설정을 불러옵니다.config.js의plugins
이어서optimist.argv가 에 전달됩니다./node_modules/webpack/bin/convert-argv.js에서argv의 매개 변수의 값을 판단하여 대응하는 플러그인을 불러올지 여부를 결정합니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ifBooleanArg("hot", function() {
  ensureArray(o      webpack-3ptions, "plugins");
  var HotModuleReplacementPlugin = require("../lib/HotModuleReplacementPlugin");
  options.plugins.push(new HotModuleReplacementPlugin());
});

ifBooleanArg("debug", function() {
  ensureArray(options, "plugins");
  var LoaderOptionsPlugin = require("../lib/LoaderOptionsPlugin");
  options.plugins.push(new LoaderOptionsPlugin({
    debug: true
  }));
});

ifArg("devtool", function(value) {
  options.devtool = value;
});

return options;

플러그인 객체가 초기화되면
option에 모든 파라미터 설정이 포함되어 있습니다. 웹 패키지를 포함합니다.config.js와 셸 명령줄에 입력한 매개 변수

1
2
3
4
5
6
7
8

{
  entry: {},//    
  output: {}, //    
  plugins: [], //    (     + shell  )
  module: { loaders: [ [Object] ] }, //    
  context: //    
  ...
}

그리고 옵션스 대상이 다음 절차의 제어 대상으로 넘어갔어요.

1
2
3
4
5
6
7
8

var webpack = require("../lib/webpack.js")

var compiler;
try {
  compiler = webpack(options);
} catch (e) {
  ......
}

lib/webpack.js 웹 패키지 대상 초기화
설정 파일과 셸 접두사 파라미터가 설명된 플러그인을 불러오고 구축 정보 옵션 대상을 전송한 후 웹 패키지 전체를 가장 길게 포장하기 시작합니다
이때 진정한 웹 패키지 대상은 이제 막 초기화되었고 구체적인 초기화 논리는lib/웹 패키지에 있다.js
웹 패키지의 실제 입구는Compiler의run 방법입니다.run이 실행되면 컴파일링과 구축 절차가 시작됩니다
하지만 런을 진행하기 전에 워치 파라미터를 설정할지 여부를 판단하고 있으면 워치 라인을 열어줍니다.
이 매개 변수를 설정하면 감청 파일 변화를 시작합니다

1
2
3
4
5
6
7
8
9
10

//     
function (err, stats) {......}

if(firstOptions.watch || options.watch) {
  ......
  compiler.watch(watchOptions, compilerCallback);
  console.log("nWebpack is watching the files…n");
} else {
  compiler.run(compilerCallback);
}