웹 팩 2 와 모듈 패키지 에 대한 초보 자 가이드(소결)

웹 팩 은 이미 현대 웹 개발 에서 가장 중요 한 도구 중의 하나 가 되 었 다.이것 은 JavaScript 에 사용 되 는 모듈 패키지 도구 이지 만 HTML 과 CSS,심지어 그림 등 모든 전단 자원 을 변환 할 수 있 습 니 다.프로그램 에서 발생 하 는 HTTP 요청 수량 을 잘 제어 하고 다른 자원 의 특성(예 를 들 어 Jade,Sass,ES6)을 사용 할 수 있 습 니 다.웹 팩 은 npm 에서 가방 을 쉽게 다운로드 할 수 있 습 니 다.
본 고 는 주로 웹 팩 을 처음 접 한 학생 들 을 대상 으로 초기 설정 과 설정,모듈,로 더,플러그 인,코드 분할 과 열 모듈 교 체 를 소개 합 니 다.
다음 내용 을 계속 공부 하기 전에 컴퓨터 에 Node.js 가 설치 되 어 있 는 지 확인 해 야 합 니 다.
초기 설정
npm 를 사용 하여 새 항목 을 초기 화하 고 웹 팩 을 설치 합 니 다:

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack@beta --save-dev
mkdir src
touch index.html src/app.js webpack.config.js
다음 파일 을 작성 합 니 다:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
 </head>
 <body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
 </body>
</html>

// src/app.js
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`

// webpack.config.js
const webpack = require('webpack')
const path = require('path')

const config = {
 context: path.resolve(__dirname, 'src'),
 entry: './app.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
 },
 module: {
  rules: [{
   test: /\.js$/,
   include: path.resolve(__dirname, 'src'),
   use: [{
    loader: 'babel-loader',
    options: {
     presets: [
      ['es2015', { modules: false }]
     ]
    }
   }]
  }]
 }
}

module.exports = config
위의 설정 은 웹 팩 에 입구 파일src/app.js을 파일/dist/bundle.js로 컴 파일 하여 출력 하고,babel 을 사용 하여 모든.js파일 을 ES 2015 에서 ES5 로 변환 하 라 는 일반적인 출발점 입 니 다.
ES5 형식의 JS 파일 로 변환 할 수 있 도록 세 개의 가방 을 설치 해 야 합 니 다.babel-core,웹 팩 로드babel-loader와 미리 설 치 된 babel-preset-es2015.{ modules: false }을 사용 하여Tree Shaking압축 파일 에서 사용 하지 않 은 내 보 내기 항목(exports)을 삭제 하여 파일 크기 를 줄 입 니 다.

npm install babel-core babel-loader babel-preset-es2015 --save-dev
마지막 으로 package.json 의 scripts 부분 을 다음 내용 으로 교체 합 니 다.

"scripts": {
 "start": "webpack --watch",
 "build": "webpack -p"
},
명령 행 에서 npm start 를 실행 하면 웹 팩 을 감시 모드 로 시작 합 니 다.src 디 렉 터 리 의.js 파일 이 변경 되면 bundle.js 를 다시 컴 파일 합 니 다.콘 솔 의 출력 은 압축 파일 의 정 보 를 보 여 주 므 로 압축 파일 의 수량 과 크기 에 주의 하 는 것 이 중요 합 니 다.

현재 브 라 우 저 에 index.html 페이지 를 불 러 올 때"Hello webpack."을 볼 수 있 습 니 다.open index.html dist/bundle.js파일 을 열 어 웹 팩 이 어떤 일 을 했 는 지 보 세 요.상단 은 웹 팩 의 모듈 안내 코드 이 고 아래쪽 은 우리 의 모듈 입 니 다.지금까지 너 는 이것 에 대해 아직 깊 은 인상 을 가지 고 있 지 않 을 것 이다.하지만 이 제 는 ES6 모듈 을 작성 할 수 있 습 니 다.웹 팩 은 모든 브 라 우 저 에 적용 되 는 패키지 파일 을 생 성 합 니 다.
사용Ctrl + C웹 팩 을 중단 하고 실행npm run build을 생산 모델 로 우리 의bundle.js을 컴 파일 합 니 다.
압축 파일 의 크기 가 2.61kB 에서 585 바이트 로 줄 었 음 을 주의 하 세 요.다시 한 번dist/bundle.js파일 을 보면 이해 하기 어 려 운 코드 를 많이 볼 수 있 습 니 다.왜냐하면 우 리 는 UglifyJS 를 사용 하여 그것 을 압축 했 기 때 문 입 니 다.이렇게 되면 우 리 는 이전 과 같은 효 과 를 얻 기 위해 더 적은 코드 를 사용 할 수 있다.
모듈
우수한 웹 팩 은 다양한 형식의 자 바스 크 립 트 모듈 을 어떻게 사용 하 는 지 알 고 있 습 니 다.가장 유명한 두 가 지 는:
  • ES 2015 import 구문
  • CommonJS require()구문
  • 우 리 는 lodash 를 설치 하고 가 져 와 서 이 형식의 모듈 을 테스트 할 수 있 습 니 다.
    
    npm install lodash --save
    
    // src/app.js
    import {groupBy} from 'lodash/collection'
    
    const people = [{
     manager: 'Jen',
     name: 'Bob'
    }, {
     manager: 'Jen',
     name: 'Sue'
    }, {
     manager: 'Bob',
     name: 'Shirley'
    }, {
     manager: 'Bob',
     name: 'Terrence'
    }]
    const managerGroups = groupBy(people, 'manager')
    
    const root = document.querySelector('#root')
    root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`
    
    
    실행npm start웹 팩 을 시작 하고 index.html 를 새로 고 칩 니 다.manager 에 따라 그룹 을 나 누 는 배열 을 볼 수 있 습 니 다.
    이 배열 을 자신의 모듈people.js로 옮 깁 시다.
    
    // src/people.js
    const people = [{
     manager: 'Jen',
     name: 'Bob'
    }, {
     manager: 'Jen',
     name: 'Sue'
    }, {
     manager: 'Bob',
     name: 'Shirley'
    }, {
     manager: 'Bob',
     name: 'Terrence'
    }]
    
    export default people
    
    우 리 는app.js에서 상대 적 인 경 로 를 사용 하여 쉽게 가 져 올 수 있다.
    
    // src/app.js
    import {groupBy} from 'lodash/collection'
    import people from './people'
    
    const managerGroups = groupBy(people, 'manager')
    
    const root = document.querySelector('#root')
    root.innerHTML = `<pre>${JSON.stringify(managerGroups, null, 2)}</pre>`
    
    메모:lodash/collection와 같은 상대 적 인 경로 가 없 는 가 져 오 는 것 은/node_modules에 설 치 된 모듈 을 가 져 오 는 것 입 니 다.자신의 모듈 은./people와 유사 한 상대 적 인 경로 가 필요 합 니 다.이 를 통 해 구분 할 수 있 습 니 다.
    로 더
    웹 팩 이 서로 다른 파일 형식 을 가 져 올 때 어떻게 해 야 하 는 지 설정 할 수 있 습 니 다.여러 개의 로 더 를 조합 하여 많은 파일 변환 에 사용 할 수 있 습 니 다.JS 에서 가 져 오기babel-loader파일 은 매우 좋 은 예 입 니 다.
    Sass
    이러한 전환 은 세 개의 단독 로 더 와.sass라 이브 러 리 와 관련된다.
    
    npm install css-loader style-loader sass-loader node-sass --save-dev
    설정 파일 에.scss 파일 에 새 규칙 을 추가 합 니 다.
    
    // webpack.config.js
    rules: [{
     test: /\.scss$/,
     use: [
      'style-loader',
      'css-loader',
      'sass-loader'
     ]
    }, {
     // ...
    }]
    메모:node-sass의 임의의 로드 규칙 을 변경 할 때webpack.config.jsCtrl + C를 사용 하여 구축 을 다시 시작 해 야 합 니 다.
    로 더 시퀀스 는 반대 순서 로 처 리 됩 니 다.
  • sas-loader 는 Sass 를 CSS 로 변환 합 니 다.
  • css-loader 는 CSS 를 JavaScript 로 해석 하고 모든 의존 도 를 분석 합 니 다.
  • style-loader 는 우리 의 CSS 를 문서 에 출력 합 니 다
  • 이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기