타사 로더를 호출하는 학습 웹팩 뷰 (XV)

--- --- 내용이 시작 복원

A, 웹팩 기본 프로세스는 파일의 다른 비 JS 유형을 처리 할 수있는 파일의 JS 유형을 포장 할 수있다;

당신이 파일의 비 JS 유형을 처리해야하는 경우, 우리는 수동으로 일부 타사 로더 적절한를 설치해야합니다;

두 프로세스의 타사 파일 형식 웹팩 거래 :

도 1은, 타사 로더를 찾아하는 대응하는 규칙 없으며, 처리 될 파일이 파일 JS 아니라는 것을 발견하고 구성 파일 갔다

당신이 해당 규칙을 찾을 수 있다면 2,,이 파일 형식을 처리하기 위해 해당 로더를 호출합니다;

3 호출 로더는 후방으로부터 전방으로 호출 될 때;

4, 마지막 호출이 완료 로더는 과정에 직접 결합 bundle.js 최종 출력으로 이동 웹팩에 포장됩니다.

셋째, CSS 파일을 가져 :

1, 설치 NPM의 전 스타일 로더 CSS 로더 -D

2 구성 파일이 열릴 webpack.config.js, 안쪽으로 Module1라는 새로운 노드 구성은, 그 목적으로한다;

속성 규칙이 모듈이 대상으로, 속성 규칙 배열은이 배열이 일치 규칙 모든 타사 문서 처리가있다.

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
  < 머리 > 
    < 메타 문자 집합 = "UTF-8"  /> 
    < 제목 > 문서 </ 제목 > 
    <! - 직접 main.js ES6 새로운 구문을 소개하기 때문에 문제 인식하지 못하는 브라우저 
    main.js의 bundle.js로 변신, 프론트 엔드 웹팩에 의해 빌드 도구 -> 
    <! - 코드 웹팩-DEV-서버가 bundle.js가 메모리를 줄일 가상 파일을 생성합니다! -> 
    <! - <스크립트 SRC = "HTTP : // localhost를 : 8081 / bundle.js"> </ SCRIPT> -> 
    <! - HTML - 웹팩-플러그인을 사용하는 경우, 우리는 더 이상 수동으로 할 필요가 없습니다 경로 처리 bundle.js 참조
    REL은 = "스타일" 
      HREF = "/ node_modules / 스트랩 / DIST / CSS / bootstrap.css" 
    /> 
    <! - NPM 나 부트 스트랩 -S -> 
  </ 헤드 > 
  < 본문 > 
    < UL > 
      < 리 > 1 < / 리 > 
      < 리 > 2 </ 리 > 
      < 리 > 3 </ 리 > 
      < 리 > 4 </ > < 리 > 5 </ 리 > <
      
      리 > 6 </ 리 > 
      < 리 > 7 </ 리 > 
      < 리 > 8 </ 리 > 
    </ UL > 
    < DIV 클래스 = "박스" > </ DIV > 
    <! - <스팬 클래스 = "glyphicon의 glyphicon - 검색 "아리아 숨겨진 ="> "사실 </ SPAN> -> 
  </ 몸 > 
</ HTML >

HTML, 
본체 { 
  패딩 : 0; 
  여백 : 0; 

  리튬 { 
    폰트 크기 : 12 픽셀; 
    라인 높이 : 30 픽셀; 
  } 

  .box { 
    폭 : 220px; 
    높이 : 120 픽셀; 
    배경 : 홈페이지 ( '../ 이미지 / moye.jpg "); 
    배경 크기 : 커버; 
  } 
}

// 이는 기본 항목 항목 JS가 파일 
내가 웹팩 -g (전 세계 전역의 g를 설치) // 글로벌 마운트 웹팩 NPM 
초기화는 NPM을 -s 입력 // 
이 명령은 현재 디렉토리 package.json 생성 (// 파일이 파일은 프로젝트에 대한 정보를 기록 
예를 들어 // : 그래서 저자의 프로젝트, 자식 주소, 입력 파일, 명령 세트, 프로젝트 이름과 버전 번호 및, 정상적인 상황에서이 파일을하는 있어야 
/ / 다른 개발자를 추가하고 사용하기 후속 프로젝트를 용이하게합니다.) 
//의 (--save, 모듈 종속성의 버전 (종속 생산 환경 저장하기위한 것 매개 변수 정보 -S) 
당신의 package.json입니다 // 파일을 종속성 필드) 
// NPM 내가 -S 수입 jQuery를 jQuery를 
// --save은 매개 변수의 의미는 종속성 모듈 버전 정보 (종속 생산 환경)에 저장하는 것입니다 -S 
당신의 package.json입니다 // 파일을 종속 필드는 
// ES6 코드도 고급 때문에, 브라우저는 변환의 필요성 해결할 수없는 
"jQuery를"에서 가져 오기 $를, 

가져 오기 "./css/index.css";  
가져 오기 "./css/index.less을" ;
가져 오기 "./css/index.scss을" ; 
"부트 스트랩 / DIST / CSS / bootstrap.css에"// 가져 오기, 파일에 포함 node_mudules, 당신은, 앞이 경로를 추가 할 필요가 없습니다 

$ (함수 () { 
  $ ( "리 : ODD ") CSS (이하"의 backgroundColor ","노란색 ");. 
  $ ("리 :. ") CSS (이하"심지어의 backgroundColor ", 기능 () { 
    반환"# "+"D97634 "; 
  }); 
}); 

/ / 상호 의존성의 JS 파일을 처리 할 1.webpack 수; 
// 2.webpack JS는, 고위 호환성 문제를 처리 할 수있는, 브라우저에 구문을 인식하지 못하는 
// 저, 브라우저는 제대로 구문을 식별 할 수 ; 
당신이 포장 된 출력 파일을 패키징 할 파일의 경로 // 웹팩 경로 

버전이 동일하지 않기 때문에 package.json에서 다음 두 줄의 코드 적어 선도, 파일을 변환 할 수 없습니다, // 
"dev에"// " --mode 개발 웹팩은 " 
//"빌드 ":"웹팩 --mode 생산의 "를 main.js 번들을 설정하도록.JS 

// 웹팩-DEV-서버가 자동으로 컴파일 기능을 패키지로이 도구를 사용 : 그것은 신속하게 현지 런타임 환경을 설정하는 데 사용하는 도구입니다
// 1 실행 NPM 난 웹팩-DEV-서버에 의존하는 지역 개발 프로젝트에이 도구를 설치 -D, 실행 NPM 내가 웹팩-DEV-서버에 의존하는 지역 개발 프로젝트에이 도구를 설치 -D; 
// 2 설치 후,이 도구의 사용 및 웹팩 명령, 정확히 같은의 사용;
우리는이 프로젝트에 있기 때문에 따라서, 로컬에 설치 웹팩-dev에 서버를 // 3을 할 수 없을 이 스크립트 명령으로 
(터미널 만에 정상적인 실행에 글로벌 -g의 도구에 부착 된 것), 터미널에 직접 PowerShell을 실행 // 
정상적으로 실행하려면이 도구 //4.webpack-dev-server, 경우 로컬 프로젝트에서, 당신은 웹팩을 설치해야합니다 필요, 
우리는 파일 bunld.js 생성, 그리고 실제 물리적 스토리지 디스크에 묶는 명령 도움이 //5.webpack-dev-server 
//하지만 직접 컴퓨터 호스팅에 메모리에, 그래서 우리는 프로젝트의 루트 디렉토리에이 좋은 bundle.js 패키지를 찾을 수 없습니다 
가상 형태로 포장 파일 // 6. 우리가 생각할 수있는, 웹팩-dev에 서버를, 우리의 프로젝트의 루트에 호스팅 
우리가 그것을 볼 수 있지만 // 그러나, 고려 DIST SRC는 동일한 수준 node_modules 할 수 bundle.js라는 보이지 않는 파일이 

"웹팩-DEV : //"DEV는 " -server --open --po 8081 --contentBase SRC --hot RT ", 
// - 직접 공개 - 포트 번호 - 페이지 경로 (이 index.html을 아래) 표시되는 - 새로 고침 소스 코드를 감소

{ 
  "이름": "VUE", 
  "버전": "1.0.0", 
  "설명" "", 
  "메인" "webpack.config.js", 
  "의존성"{ 
    "부트 스트랩": "^ 4.3 0.1 ", 
    "JQuery와 ""^ 3.4.1 ", 
    ": "^ 3.3.5" "웹팩 CLI - 
  }, 
  "devDependencies "{ 
    "CSS 로더 ":"^ 3.0.0 ", 
    "파일 - 로더 ":"^ 4.0.0 ", 
    "HTML-웹팩 - 플러그인 ""^ 3.2.0 ", 
    "덜 ""^ 3.9.0 ", 
    "덜 로더 ":"^ 5.0.0 ", 
    " 노드 로더 ":"^ 0.6.0 ", 
    "노드 말대꾸 ""^ 4.12.0 ", 
    "말대꾸 로더 ":"^ 7.1.0 ", 
    "하는 SCS-로더 ":"0.0.1 ", 
    "스타일 로더 ":"^ 0.23 0.1 ", 
    "URL 로더 ":"^ 2.0.1 "
    "웹팩" "^ 4.35.2", 
    "웹팩-DEV-서버" "^ 3.7.2" 
  }, 
  "스크립트": { 
    "테스트": "에코 \"오류 : 테스트 지정된 \ "&& 1 번 출구 ", 
    "DEV ":"웹팩-DEV-서버 --open --port 8081 --contentBase SRC --hot ", 
    "구축 ":"웹팩 --mode 생산 " 
  }, 
  "키워드 "[] 
  "저자 "" " 
  "라이센스 ""ISC를 " 
}

경로 = CONST ( "경로")을 필요로; 

// 생성 된 메모리 HTML 페이지에 소개 된 위젯 
// 긴 플러그로, 노드 플러그인에 갈 확신 
//이 효과 두 개의 위젯을 : 
자동 // 1. 메모리 생성 지정된 페이지에 기초하여 페이지 메모리; 
// 2 자동 페이지로 패키지화 bundle.js 추가는 
는 ( "HTML-웹팩 - 플러그인") CONST는 = 필요 htmlWebpackPlugin; 

//이 구성 파일은 실제로 JS 파일 노드의 조작은, 구성 객체 외측 노출 
module.exports = { 
  path.join (__ dirname이 "./src/main.js는"), // 유입구, 아카이브 파일 출품 
  출력 { 
    // 출력 구성 
    경로 : path.join은 (__ dirname은 " ./dist") // 포장 된 파일을 지정하는 폴더에 출력 디렉토리 
    파일 이름 : "bundle.js"// 지정된 출력 파일 이름 
  } 
  모드 : 버전이 동일하지 않기 때문에 "개발", //, 당신은 출력을 완료하려면이 옵션을 추가해야합니다! ! ! 

  플러그인 :
      템플릿 : path.join (__ dirname은 " ./src/index.html") // 템플릿 페이지를 지정 페이지가 지정된 경로에 따라 될 것입니다 
      메모리의 페이지 생성 // 
      파일 이름 : "index.html을"// 생성 된 페이지의 이름을 지정 
    }) 
  ] 

  으로 Module1이 : { 
    // 모든 타사 모듈이 노드 구성 및 로더 
    규칙을 : 
      // 모든 타사 모듈 일치 규칙 
      {시험 : /\.css$/, 사용 : [ "스타일 로더" , "CSS 로더"]}, // 구성 과정 .CSS 파일 로더 타사 규칙 
      {시험 : /\.less$/, 사용 : [ "스타일 로더", "CSS -loader ","이하 - 로더 " ]} // 파일 처리 .less 
      {시험 : /\.scss$/ 사용 : "스타일 로더 ","CSS 로더 ","사스 로더 "]} // 핸들 .scss 파일 
      { 
        테스트 : /\.(jpg|png|gif|bmp|jpeg)$/, 
        사용 "URL 로더 한계 = 616? & 이름 =. 해시 : 8] - [이름] [내선] "
      } // 프로세스 내가 -D-로더 NPM 이미지 파일 URL 로더 파일 
      우리가 주어진 값보다 크거나, 이미지를 참조하는 경우 주어진 한계 값 @은, 사진의 크기, 단위는 바이트, 
      // 64 기수 문자열 포맷이 소정 값 미만으로 변환되지 않고, 다음 스트링 base64로 변환 
      동일한 이름의 두 이미지를 구별하기 위해서, 몇 가지가 배치되고, // 32 비트 해시 값이 정상 
      {// 
      // 테스트 : /\.(ttf|eot|svg|woff|woff2)$/, 
      // 사용 : "URL-로더"프로세스 글꼴 파일 // 
      //} 
    ] 
  } 
}; 

// 콘솔 프로젝트 패키지,이 시간 웹팩 다음과 같이 웹팩 입력 : 
// (1) 먼저, 웹팩 우리는 입구와 출구 ;. 지정하는 순서의 형태로하지 않았다 것을 발견 
프로젝트로 이동합니다 루트 //2.webpack을 'webpack.config.js의 프로필라는 디렉터리 조회; 
// 3 개 구성 파일들이 발견되면, 웹팩 것이 구성 파일의 구현을 해결하기 위해이 때, 실행 프로파일을 분석 
구성을 얻을 // 파일 구성 개체를 내보낼; 
// 4 웹팩 구성 객체를 얻을 때, 당신은, 구성 객체를 가져 감안 입출구하고 포장 구조체.