웹 팩: 웹 개발 을 위 한 모듈 관리자

웹 팩: 웹 개발 을 위 한 모듈 관리자
원문 주소: http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/
10 Sep 2014
개발 자 에 게 좋 은 가방 관리 자 는 적은 노력 으로 큰 효 과 를 거 둘 수 있다.현재 유행 하 는 프로 그래 밍 언어 는 대부분 자신의 것 패키지 관리 시스템 이 있다.최근 몇 년 동안 웹 개발 이 점점 뜨 거 워 지면 서 그 개발 도구 도 점점 더 잘 사용 되 었 다. Webpack 는 바로 웹 개발 을 위 한 패키지 관리자 이다.웹 개발 에 사용 되 는 HTML, 자바 script, CSS 및 각종 정적 파일 (그림, 글꼴 등) 을 잘 관리 하고 포장 하여 개발 과정 을 더욱 효율 적 으로 할 수 있 습 니 다.
모듈 화 프로 그래 밍
오랫동안 웹 개발 자 들 은 필요 한 자바 script, CSS 파일 을 HTML 에 넣 어 방대 한 프로젝트 를 관리 하 는 데 매우 번 거 로 웠 다.Node.js 의 등장 은 이런 상 태 를 바 꾸 었 다. 자 바스 크 립 트 의 모듈 은 Node. js 가 발명 한 것 이 아니 지만 이 개념 을 크게 발전 시 켰 다.
그러나 Node. js 는 서버 에 사용 되 는 것 이기 때문에 모듈 화 기술 을 브 라 우 저 에 사용 하기 위해 사람들 은 많은 도 구 를 만 들 었 다. RequireJS, Browserify, LABjs, Sea.js, Duo 등 이다.이 동시에 자바 script 의 기준 이 모듈 의 규범 에 대해 정 의 를 내리 지 않 았 기 때문에 사람들 은 일련의 서로 다른 모듈 정 의 를 정의 했다. CommonJS, AMD, CMD, UMD 등 이다.ES6 Module 의 등장 이 이러한 분열 상 태 를 중단 할 수 있 기 를 바 라 는 슬 픈 일이 다.
웹 팩 은 CommonJS 와 AMD 형식의 모듈 을 동시에 지원 하 며, 지원 되 지 않 는 모듈 형식 에 대해 서 는 모듈 진행 shimming 도 지원 한다.간단 한 예 를 들다.

// content.js module.exports = "It works from content.js.";

 
   
    // entry.js document.write(require("./content.js")); 
  
    
   
    <!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html> 
  
   는 입구 파일 로 불 러 왔 습 니 다  
    entry.js.명령 행 을 통 해 content.js 을 컴 파일 합 니 다.
$ webpack ./entry.js bundle.js 
 entry.js  
   에 나 오 는 내용 이 이미 불 러 왔 다.
웹 개발 에 사용 되 는 것 은 자 바스 크 립 트 뿐만 아니 라 CSS 와 각종 정적 파일 도 있다.웹 팩 은 각종 자원 파일 을 변환 하여 브 라 우 저 에 올 바른 형식 으로 불 러 올 수 있 는 로 더 라 는 것 을 정의 합 니 다.예 를 들 어 상기 프로그램 에 대해 만약 에 우리 가 대응 하 는 CSS 파일 이 있다 면:/* style.css */ body { background: yellow; } 
  
    index.html content.js 이 CSS 를 불 러 옵 니 다.
require("!style!css!./style.css"); document.write(require("./content.js")); 
  
    
        entry.js 에서 CSS 가 불 러 오 는 것 을 볼 수 있다.위 프로그램 을 실행 하기 전에 필요 한 loader 를 설치 해 야 합 니 다.
npm install --save-dev style-loader css-loader

  
    
         、  index.html 이면 됩 니 다.
웹 팩 은 많은 흔 한 loader 을 제공 합 니 다. 개발 할 때 사용 할 수 있 는 파일 을 모두 require 하여 하나의 자바 script 을 생 성하 여 발표 하기 쉽 습 니 다.
상기 require CSS 의 코드 는 기능 이 강하 지만 쓰기 가 번 거 롭 습 니 다. 웹 팩 은 프로필 에서 설정 하기 조건 에 맞 는 파일 을 같은 그룹 loader 로 처리 하 는 것 을 지원 합 니 다.다음은 제 가 사용 하 는 loader 입 니 다.
{ module: { loaders: [ {test: /\.coffee$/, loader: 'coffee'}, {test: /\.html$/, loader: 'html'}, {test: /\.json$/, loader: 'json'}, {test: /\.css$/, loader: 'style!css!autoprefixer'}, {test: /\.scss$/, loader: 'style!css!autoprefixer!sass'}, {test: /\.woff$/, loader: "url?limit=10000&minetype=application/font-woff"}, {test: /\.ttf$/, loader: "file"}, {test: /\.eot$/, loader: "file"}, {test: /\.svg$/, loader: "file"} ] } } 
  
    
      ，css-loader   CSS  ，      import，  CSS  ； style-loader     CSS    DOM style。      SASS，   require    require("!style!css!sass!./style.scss") 면 됩 니 다. 시스템 은 자동 으로 먼저 실행 autoprefixer 한 다음 에 CSS 를 불 러 온 다음 에 DOM 의 style 로 불 러 옵 니 다.
이 밖 에 웹 팩 은 플러그 인 자 바스 크 립 트 에 대한 압축, 교체 등 각종 조작 을 지원 한다.
모듈 관리 에 의존
웹 팩 은 모듈 다운 로드 를 제공 하지 않 지만 기 존 패키지 관리자 와 잘 어 울 릴 수 있 습 니 다.웹 개발 자원 을 npm, Bower, component 등 으로 관리 하고 웹 팩 에 불 러 올 수 있 습 니 다.
웹 팩 의 파일 로드 는 세 가지 로 나 뉜 다.
 절대 경로, 예 를 들 어  
  .이 때 대상 이 디 렉 터 리 인지 먼저 확인 하고 디 렉 터 리 라면  
        ，  require('./style.css') 필드 require('/home/me/file') 를 검사 합 니 다. (Webpack 을 동시에 Bower 필드 검사 할 수 있 습 니 다.package.json 필드 가 없 거나 main 필드 가 없 으 면 package.json 파일 이름 으로 사용 합 니 다.상기 과정 을 통 해 저 희 는 절대적 인 경로 의 파일 이름 을 분석 한 다음 에 확장 자 를 추가 하려 고 합 니 다 (확장 자 는 main 에서 설정 할 수 있 습 니 다). 첫 번 째 존재 하 는 파일 을 최종 결과 로 합 니 다.
   상대 경로, 예 를 들 어 index.현재 경로 나 프로필 에 있 는 webpack.config.js 을 상대 경로 의 디 렉 터 리 로 사용 합 니 다.로 딩 과정 은 절대 경로 와 비슷 합 니 다.
   모듈 경로, 예 를 들 어 require('./file').설정 파일 의 모든 검색 디 렉 터 리 에서 찾 습 니 다.
  
복잡 한 모듈 경로 에 대해 서 는 별명 도 설정 할 수 있 습 니 다.경로 분석 설정 의 예:{ resolve: { root: [appRoot, nodeRoot, bowerRoot], modulesDirectories: [appModuleRoot], alias: { 'angular': 'angular/angular', 'lodash': 'lodash/dist/lodash' }, extensions: ['', '.js', '.coffee', '.html', '.css', '.scss'] } } 
  context  require('module/lib/file')

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Emacs에서 디폴트보다는 편하게 JSP를 쓰고 싶다.

Emacs에서 JSP(JavaServer Pages)를 쓰게 되었지만 코드 성형 설정이 없었다. CentOS 6 GNU Emacs 23.1.1 STEP 1 의 다운로드에서 파일을 다운로드합니다. (나는 Github에...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

웹 팩: 웹 개발 을 위 한 모듈 관리자

좋은 웹페이지 즐겨찾기