Webpack 관련 Parameter에 대한 자세한 설명

이 글은 주로 Webpack 실행 명령 매개변수에 대한 자세한 설명을 소개하고 있습니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가며 함께 살펴볼까요

1. 개요

이전 장에서는 webpack의 설치, webpack.config.js의 기본 구성, webpack 실행 네이밍 및 사용법에 대해 설명했습니다. require 방법 중 js 파일을 수정하거나 추가할 때마다 webpack 명령을 다시 실행하여 컴파일한다는 사실을 눈치채셨는지 모르겠습니다. 이 방법은 매우 번거롭고 전체 프로젝트에 문제가 발생합니다. 수백만 번 실행됩니다. 다음에는 이러한 상황을 방지하기 위한 webpack 관련 파라미터에 대해 설명하겠습니다.

2. 매개변수에 대한 자세한 설명

webpack이 명령을 실행한 후 일부 매개변수에는 고유한 기능이 있습니다. 다음은 매개변수 목록입니다. 매우 중요한 매개변수입니다. 압축되지 않은 700kb 파일은 압축 후 바로 180kb로 줄어듭니다(주로 스타일 섹션이 스크립트의 한 줄을 차지하여 압축되지 않은 스크립트가 매우 커지기 때문입니다).

여기에서는 webpack --watch 매개변수에 중점을 둡니다. 이 매개변수의 주요 기능은 파일이 변경되었는지 모니터링하는 것입니다. 변경된 파일이 다시 컴파일됩니다. 이 명령은 매우 유용합니다. 아래에서는 webpackDemo 프로젝트를 데모로 사용합니다.

먼저 터미널에서 webpack --watch 명령을 실행합니다.

스크린샷을 보면 명령을 실행한 후 webpack 명령이 실행된 후 웹팩이 중지되지 않고 계속 실행되는 것을 볼 수 있습니다. login.js의 내용을 수정하여 터미널에 어떤 변화가 일어나는지 살펴보겠습니다.

$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch //监听变动并自动打包

$ webpack -p//压缩混淆脚本，这个非常非常重要！

$ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了其中的 
$ webpack --progress //显示进度条
$ webpack --color //添加颜色

login() 메서드를 추가하면 터미널이 이때 변경됩니다.

비교하고 싶습니다. 이전 스크린샷에는 login.js 파일에 대해서만 컴파일된 추가 레코드가 있습니다.

위 내용은 Webpack 관련 Parameter에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!