- 첫 번째 지역 서비스 웹팩
- 웹팩 일부 지역 서비스 지침 및 운영 응용 프로그램 관련
첫 번째 지역 서비스 웹팩
// 작업 공간 SRC // 폴더 하는 index.js // 입력 파일 index.css // 테스트 패턴 파일 index.html을 // 구조 파일 package.json // 패키지 시스템 구성 정보가 webpack.config.js // 패키지 구성을
플러그인 로더의 설치를 다운로드해야합니다 :
1 NPM 웹팩 --save- 설치 DEV 2 웹팩-CLI --save- 설치 NPM DEV 3 NPM 스타일 로더 --save- 설치 dev에 4 NPM은 CSS 로더 --save- 설치 dev에 5 HTML-웹팩 - 플러그인 NPM 설치 --save- DEV 6 NPM은 클린 웹팩 - 플러그인 설치 --save- DEV 7 설치 웹팩-DEV-NPM을 서버 - g 8 NPM 설치 웹팩 데브 서버 - 저장 데브
우리는 전 세계적으로 웹팩-dev에 서버를 설치하는 데주의를 지불 한 다음 로컬 작업 공간에 설치되어 있어야합니다. 그런 다음 테스트 코드는 매우 간단합니다, 그냥 기본 구성 HTML을 생성하기 위해, 바디 CSS는 배경 색상을 설정 한 다음 파일 CSS 파일하는 index.js 입구에 도입합니다. 내 이전 블로그의 내용이 가장 간단한 구성입니다 찾을 것 알고있다 webpacd 경우, 다음과 같은 패키지이 구성을 사용 :
1 개 VAR의 경로 ( "경로"필요 = ); 2 VAR {CleanWebpackPlugin} =은 ( '청소 웹팩-플러그인을'필요 ); 3 VAR HtmlWebpackPlugin = 필요 ( 'HTML-웹팩 - 플러그인' ); 4 module.exports = { 5 엔트리 { 6 인덱스 './ SRC /하는 index.js' 7 } 8 출력 { 9 경로 : path.resolve (__ dirname이 'DIST' ), 10 파일명 : "[이름] [해시 : 5] .bundle.js ' 11 } 12 모듈 { 13 규칙 [ 14 { 15 시험 :. / \ CSS $으로의 / , 16 용도 : [ 17 {로더 '스타일 로더' } 18 {로더 'CSS 로더' } 19 ] 20 } 21 ] 22 } 23 플러그인 : 24 새로운 CleanWebpackPlugin (), 25 새로운 HtmlWebpackPlugin ({ 26 템플릿 : './ SRC / 된 index.html' 27 }) 28 , 29 모드 '개발' 30 }
실행 : 성공적으로 구성 웹팩 시험 여부, 성공적인 구성의 경우 다음 명령.
실행 : 웹팩-dev에 서버. 성공적으로 실행 웹팩 코드 파일 범위의 이행을 감시하기 시작했다 재생, 콘솔 깜박이는 손에있다. 다음 지침은 단지 설명에 생성 된 로컬 포트 링크를 찾을 실행 발견, 다음 내 테스트 촬영 포트 링크 (브라우저 링크 모음에 직접 붙여 링크를) 생성됩니다
당신은 단지 HTML 페이지를 패키지 편집 페이지에 대한 링크를 찾을 수 있습니다, 좋은 후 수정 된 스타일 편집기 (수정 신체의 배경 색상을) 수정 다시이 시간, 다음이 페이지가 자동으로 새로 고침하는 시간 및 테스트 JS 코드를 저장, 을 console.log ( '안녕하세요') 인쇄 명령 (편집) JS 편집의 브라우저 인쇄 인사의 자동 제어에서 볼 수 있습니다. 위의 작업은 지역 서비스의 기능, 당신은 웹팩-dev에 서버를 달성하는 데 사용할 수있는이 수시로 디스플레이 효과를 코딩, 동시에 듀얼 스크린을 사용하는 개발 작업의 효율성을 향상시키기 위해 많은 기업에서 전면입니다.
이 서비스이기 때문에, 물론, 데이터 작업이, 당신은 다음과 같은 아약스 요청을 사용하여 요청 :
NPM 설치 JQuery와 --save-DEV
dist 파일 폴더 (임의의 파일 JSON의 데이터를) 데이터 요청을 테스트하기위한 JSON 파일 서버를 캐시 할 필요가 있기 때문에 그런 다음, 설정 파일 패키지 파일 청소 웹팩 - 플러그인 제거 참고 :
// 새로운 CleanWebpackPlugin ()
다음 열기 페이지 (브라우저 콘솔을 엽니 다)의 새로운 세대에 대한 링크 서비스를 다시 시작합니다
웹팩-DEV-서버
그런 다음 로컬 서버를 요청하는 jQuery를 아약스 JSON 데이터 요청을 작성하는 편집기에서하는 index.js 편집 :
가져 오기 './index.css' ; // var에 $ = ( 'jQuery를')이 필요합니다; 가져 오기 $ 'jQuery를'에서 ; $ 아약스 ({ URL : 'HTTP : // localhost를 : 8081 / DIST /를 data.json를' , // 이 경로가 링크 포장 된 폴더 경로 + 파일 이름 + JSON에 의해 생성되는 것을 참고 : 성공 기능 (데이터) { 하며 CONSOLE.LOG (데이터) ,} : 오류 함수 () { 을 console.log ( '오류' ) ; } })
당신이 그것을하는 index.js 편집 저장하는 경우에는 요청이 아약스를 통해 로컬 서버에 발생할 수 있음을 확인할 수 있습니다.
두, 지침 및 응용 프로그램 관련 운영 일부 지역 서비스를 웹팩
프로그램이 이유의 기본 포트를 사용하기 때문에 포트 충돌이, 다음 포트 config.js 파일을 다시 구성 할 경우, 문제는 포트 충돌이 발생할 수 있습니다 :
1 module.exports = { 2 devServer { 3 포트 '9091' 4 } 5 }
당신이 지정된 포트 서비스를 열 수 있습니다, 구성 파일에이 구성을 추가,하지만주의해야 할 한 가지 파일 서비스가 자동으로 새로 고쳐지지 않는, 열린 상태 인 구성을 수정하는 경우 수동으로 현재의 모니터를 닫을 필요가있다, 다음을 적용하기 시작합니다. (CTRL + C 단축키는 서비스를 종료)
웹팩 지역 서비스 모니터 프로젝트 코드는 구성 파일을 패키지로 환경 config.js을 모니터링하지 않습니다, 그래서 당신은 서비스를 다시 시작해야하기 때문에. 위의 구성에 따라, 당신은 또한 서버 주소를 지정하는 구성 등록 정보를 추가 할 수 있습니다, 서버 기본 간격은 DIST 폴더 아래에 생성 된 코드를 포함 할뿐만 아니라, 때문에이 간격의 작품으로, 콘솔 위치에서 서비스에 간격이다, 및 코드 src 폴더 및 구성 파일, 더 나은 서버와 다음과 같은 구성을 추가 할 수있는 개발 환경을 구별하기 위해 :
1 devServer { 2 포트 '9091' , 3 contentBase 'DIST' 4 },
서버 공간을 변경하는 경우, 다음 아약스 요청은 확실히 변경해야하고, 경로 DIST이 층을 제거 할 필요가 전에 data.json을 찾을 수 있습니다.
URL : '에 http : // localhost를 : 9091 / data.json'
이 단계는 매우 편리한 작업이 발견되지 않으며, 수동으로 링크를 브라우저에 대한 링크를 복사하거나 수동으로 입력 할 필요는 그렇게 것이 얼마나 편리한 웹팩입니까? 다음은 당신이 해결하는 데 도움이 :
열린 웹팩은 서버 DEV --- // 로컬 서버에 설정이 자동으로 기본 브라우저에있는 페이지를 엽니 다
서비스, 트리거 디버그 콘솔을 볼 수 디버깅에 필요한 관련 정보가 밖으로 인쇄 제어 스트립의 페이지를 업데이트 할 때마다 연 후, 다음 팁 당신이 상처를 만들 것입니다 모두 흰색을 이동하기 때문에, 당신은이 시간을 수행해야합니다
웹팩-DEV-서버 --open --color
서로 다른 정보를 구별하기 위해 다른 색상을해야합니다 --color 이후의 지시 명령 메시지 콘솔을 추가합니다.
셋째, 뜨거운 업데이트 : 뜨거운 모듈 교체
개방 지역 서비스의 앞에 소개하고 페이지를 다시 한 번 모든 데이터 요청을 새로 고칠 것을 의미하기 때문에 자동으로,이 문장에 매우 민감해야한다 프런트 엔드 개발, 즉, "자동 갱신"에주의, 이런 종류의 페이지를 새로 고침 프런트 엔드 서비스에 표시되지해야 할 첫 번째 페이지 이후의 요청에 더하여, 당신은 페이지를 새로 고침을 기다리고있을 시간의 절반을, 소스 코드 파일을 한 번에 모든 네트워크 요청 트리거됩니다 저장, 컴파일, 실행, 평가 근무 때마다 생각 에, 우리의 테스트 코드의 소스 코드는 신체 인식의 아주 작은 금액은 실제 개발에 그것에 대해 생각하면 많이 가지고 페이지를 요청하지 않기 때문에. 문제의 심각성은 더 말할 및 성능 문제를 해결하기 위해 다음 웹팩 부분 리프레시를 달성하는 방법을 살펴합니다 :
열기 CSS를 내장 기능의 웹팩 모듈이 부분 새로 고침을 달성하기 위해 코드를 수정 :( 설정 구성 파일에 다음과 같은 구성을 추가)
. (1) VAR의 웹팩 (가) ( '웹팩') = 필요; // 도입 웹팩 모듈 (2) ... (3). module.exports = { 4. 플러그인 :이 . 5 ... . 6 새로운 새 Webpack.HotModuleReplacementPlugin는 () // 부분 리프레시 플러그 도입 7 ] . 8 devserver : { . 9 ... 10 뜨거운 : true로 // 열려 뜨거운 갱신 11 } 12 }
오픈 서비스 업데이트 CSS의 코드에서 위의 구성을 추가 한 후, 대신 전체 페이지를 새로 고치는 뜨거운 업데이트 (부분 리프레시)를 실현할 수 있습니다. 그러나, 부분 리프레시 JS 코드가 해결되지 않는이 구성, 뜨거운 업데이트는 다음과 같은 구성이 필요 JS :
JS 뜨거운 업데이트는, 단지 당신이 코드를 추가해야합니다 (참고 : JS 코드 파일 추가) 기본 구성의 앞에 JS의를 :
//는 열 JS 파일의 갱신 동작의 개시가 수행되면 고온 업데이트를 열 것인지 결정 IF {(module.hot) module.hot.accept를 (); }
JS가 아래 열리는 원본을 인쇄 결과에 추가하면 브라우저 콘솔에 인쇄 결과를 업데이트 할 때 노트에 비운의 모든 업데이트는 페이지 새로 고침 인 경우, 인쇄 결과를 업데이트 삭제됩니다 있는지 확인하기 위해, 뜨거운 갱신 여부를 식별 뜨거운 업데이트합니다.
마지막으로, 코드는 구성 파일과 JS 코드를 제공합니다 :
1 개 VAR의 경로 ( "경로"필요 = ); 2 VAR {CleanWebpackPlugin} =은 ( '청소 웹팩-플러그인을'필요 ); 3 VAR HtmlWebpackPlugin = 필요 ( 'HTML-웹팩 - 플러그인' ); 4 VAR 웹팩 필요 = ( '웹팩' ); 5 module.exports = { 6 입력 : { 7 인덱스 './ SRC /하는 index.js' 8 }, (9) 의 출력 { 10 과정 : path.resolve (__ dirname이 'DIST' ), 11 파일명 : "[이름] [해시 : 5] .bundle.js ' 12 } 13 모듈 { 14 규칙 [ 15 { 16 시험 :. / \ CSS $으로의 / , 17 용도 : [ 18 {로더 '스타일 로더' } 19 {로더 'CSS 로더' } 20 ] 21 } 22 ] 23 } 24 플러그인 : 25 // 새로운 CleanWebpackPlugin (), 26 새로운 HtmlWebpackPlugin ({ 27 템플릿 './ SRC / index.html을' 28 }), 29 새로운 Webpack.HotModuleReplacementPlugin () 30 , 31 devServer { 32 포트 '9091' , 33 contentBase 'DIST' , 34 뜨거운 : 진실 (35) } (36) 모드 '전개' 37 }
. 1 가져 오기 './index.css' ; 2 // var에 $ = ( 'jQuery를')이 필요합니다; 3. $ 'jQuery를'가져 오기 ; 4. $ 아약스 ({ 5. URL : 'HTTP : // localhost를 : 9091 / 데이터 '.json, // 경로는 링크 포장 폴더 경로 + 파일 이름 + JSON 의해 생성되어 있습니다 6. 성공 : 함수 (데이터) { 7. 상기 CONSOLE.LOG (데이터) (8). } 9. 오류 : 함수 () { 10 CONSOLE.LOG ( '오류' ) . 11 } 12 }) (13)는 ( '? 뜨거운 날'는 CONSOLE.LOG를 ); 14 (15) //이 열 JS 파일 갱신 동작의 개시가 수행되면 고온 업데이트를 열 것인지를 결정한다 (16) IF (module.hot) { . 17 module.hot.accept을 (); 18이다 }