웹 팩 js 포장 방법

웹 팩 은 전단 자원 로드/포장 도구 입 니 다.이것 은 모듈 의 의존 관계 에 따라 정적 분석 을 한 다음 에 이 모듈 들 을 지정 한 규칙 에 따라 대응 하 는 정적 자원 을 생 성 할 것 이다.
코드 실천 에 앞서 웹 팩 의 기초 지식 을 먼저 말 해 보 세 요.
1,왜 사용 하 는 웹 팩
현재 의 많은 웹 페이지 는 기능 이 풍부 한 응용 이 라 고 볼 수 있 는데 그들 은 복잡 한 자 바스 크 립 트 코드 와 많은 의존 패 키 지 를 가지 고 있다.개발 의 복잡 도 를 간소화 하기 위해 전단 지역 사회 에 좋 은 실천 방법 이 많이 생 겨 났 다.

모듈 화 를 통 해 복잡 한 프로그램 을 작은 파일 로 세분 화 할 수 있 습 니 다.

TypeScript 와 같은 자 바스 크 립 트 를 바탕 으로 확장 되 는 개발 언어:현재 버 전의 자 바스 크 립 트 가 직접 사용 할 수 없 는 특성 을 실현 할 수 있 고 그 후에 자 바스 크 립 트 파일 로 바 꾸 어 브 라 우 저 를 식별 할 수 있 습 니 다.

Scss,less 등 CSS 예비 프로세서

…

2.웹 팩 이란 무엇 인가
웹 팩 은 모듈 패키지 로 볼 수 있 습 니 다.프로젝트 구 조 를 분석 하고 자바 스 크 립 트 모듈 과 다른 브 라 우 저 에서 직접 실행 할 수 없 는 확장 언어(Scss,TypeScript 등)를 찾 아 브 라 우 저 에 적합 한 형식 으로 포장 하 는 것 입 니 다.
3.WebPack 은 Grunt 와 Gulp 에 비해 어떤 특성 이 있 습 니까?
사실 웹 팩 과 다른 두 가 지 는 비교 가능성 이 많 지 않다.Gulp/Grunt 는 전단 의 개발 절 차 를 최적화 할 수 있 는 도구 이 고 웹 팩 은 모듈 화 된 해결 방안 이지 만 웹 팩 의 장점 으로 인해 웹 팩 은 Gulp/Grunt 류 를 대체 할 수 있다.
Grunt 와 Gulp 의 작업 방식 은 설정 파일 에서 일부 파일 을 컴 파일,조합,압축 등 작업 과 유사 한 구체 적 인 절 차 를 가리 키 며 이 도 구 를 사용 하면 자동 으로 이 작업 을 수행 할 수 있 습 니 다.
이러한 개선 은 확실히 우리 의 개발 효율 을 크게 향상 시 켰 다.그러나 그들 이 개발 한 파일 을 이용 하려 면 추가 적 인 처 리 를 해 야 브 라 우 저 를 식별 할 수 있 고 수 동 으로 처리 하 는 것 도 매우 반 잠 겨 서 웹 팩 류 의 도구 의 등장 에 수 요 를 제공 했다.

웹 팩 의 작업 방식 은 프로젝트 를 하나의 전체 로 생각 하고 주어진 메 인 파일(예:index.js)을 통 해 웹 팩 은 이 파일 부터 프로젝트 의 모든 의존 파일 을 찾 습 니 다.loaders 로 처리 하고 마지막 으로 브 라 우 저 로 포장 하면 다른 자바 스 크 립 트 파일 을 볼 수 있 습 니 다.

그림 에서 볼 수 있 듯 이 웹 팩 은 다양한 정적 자원 js,css,less 를 정적 파일 로 변환 하여 페이지 의 요청 을 줄 일 수 있 습 니 다.
만약 에 두 가 지 를 비교 하려 면 웹 팩 의 처리 속도 가 빠 르 고 직접적 이 며 다양한 유형의 파일 을 포장 할 수 있 습 니 다.
이제 저희 가 간단하게 소개 해 드릴 게 요.
웹 팩 은 여러 개의 js 파일 을 어떻게 통합 합 니까?
웹 팩 설치
웹 팩 을 설치 하기 전에 로 컬 환경 에서 node.js 를 지원 해 야 합 니 다.node.js 를 설치 하면 node 공식 문 서 를 참고 할 수 있 습 니 다.
다음 명령 을 사용 하여 전역 에 웹 팩 을 설치 합 니 다.

$ npm install webpack -g

웹 팩 은 컴퓨터 에 설치 되 어 있 으 며,이 제 는 웹 팩 명령 을 사용 할 수 있 습 니 다.
프로젝트 에 웹 팩 사용 하기
다음 명령 을 사용 하여 프로젝트 루트 디 렉 터 리 에 package.json 파일 을 생 성 합 니 다.

$ npm init

프로젝트 에 웹 팩 설치 하기
웹 팩 을 pageage.json 배합 파일 에 추가 하고 다음 명령 을 사용 합 니 다.

$ npm install --save-dev webpack

이때 package.json 파일 을 보고 package.json 이 처음 만 들 었 을 때 코드 를 새로 추 가 했 습 니 다.

웹 팩 포장 의 두 가지 방식

webpack entryoutput(명령 행)

webpack-config webpack.conf.js(webpack 설정 파일 지정)

명령 행 패키지 js 사용
js 파일 두 개 만 들 기
app.js,sum.js,sum.js 를 만 들 고 덧셈 함 수 를 내 보 냅 니 다.app.js 는 이 함 수 를 사용 합 니 다.

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
  return a + b;
}

2.웹 팩 명령 으로 포장 하기
현재 디 렉 터 리 에서 사용:webpack app.js bundle.js;이 입 구 는 app.js 이 고 출력 파일 은 bundle.js 입 니 다.그러면 파일 에 bundle.js 파일 이 하나 더 나 오 는 것 을 볼 수 있 습 니 다.
html 파일 을 만 들 고 bundle.js 를 도입 하여 실행 합 니 다.콘 솔 은 sum(21,22)43 을 인쇄 합 니 다.
웹 apck 설정 파일 패키지 사용(위의 두 js 파일)
웹 팩.conf.js 를 만 들 고 wepack 설정 파일 을 작성 합 니 다.

//       commonjs  

module.exports = {

  //   ，     
  entry: {
    app: './app.js'
  },

  //   
  output: {
    //    hash  js
    filename: '[name].[hash:5].js'
  }
}

명령 행 에 입력:webpack--config webpack.conf.js,app.dd1c6.js 에 hash 가 있 는 js 파일 이 생 성 되 었 습 니 다.이 js 파일 을 HTML 에 도입 하여 정상 출력:sum(21,22)43

설정 파일 의 이름 은 웹 팩.config.js 이 며 명령 행 에 웹 팩 을 입력 하면 됩 니 다.

webapck 배합 babel 포장 ES6,7
프로젝트 루트 디 렉 터 리 에 bable-loader 와 babel-core,babel-preset 을 설치 합 니 다.

npm init 를 사용 하여 프로필 생 성

npm install babel-loader babel-core --save-dev

새 app.js,index.html,webpack.config.js 등 파일

webpack.config.js 작성

babel-preset 을 설치 하여 컴 파일 된 버 전 을 지정 합 니 다:npm install babel-preset-env--save-dev

app.js 에 ES6 문법 을 마음대로 쓰 세 요

명령 행 을 사용 하여 웹 팩 을 입력 하여 컴 파일 합 니 다

웹 팩 프로필

//       commonjs  
module.exports = {

  //   ，     
  entry: {
    app: './app.js' //     
  },

  //   
  output: {
    //    hash  js
    filename: '[name].[hash:8].js'
  },

  //   loader
  module: {

    // rules          
    rules:[
      {
        test: /\.js$/, //      ，             loade   
        use: {
          loader: 'babel-loader', //   bable-loader   
          options: { //     
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //     babel-preset    
                } 
              }]
              
            ] //         
          }
        },
        exclude: '/node_module/' //     
      }
    ]
  }
}

app.js 와 컴 파일 후 hash 가 있 는 js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); //         *2

console.log(newArr);

// ==================//
//     （          ）
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
 return item * 2;
}); //         *2

console.log(newArr);

babel 의 두 플러그 인:Babel Polyfill 과 Babel Runtime Transform
일부 함수 와 방법 을 처리 하 는 데 사용 합 니 다(Genertor,Set,Map,Array.from 등 babel 에 의 해 처리 되 지 않 았 습 니 다.위의 두 플러그 인 이 필요 합 니 다)

Babel Polyfill(전역 개스킷),npm install babel-polyfill--save,사용:import"babel-polyfill";

Babel Runtime Transform(개발 프레임 워 크 준비),npm install babel-plugin-transform-runtime--save,npm install babel-runtime--save

새로 만 든.babelrc 를 설정 합 니 다

app.js 에 코드 추가

import "babel-polyfill";
let func = () => {};
const num = 30; 
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); //         *2

console.log(newArr);
//   babel-polyfill
arr.includes(8);

// Genertor   
function* func2() {
}

웹 팩 설정

//       commonjs  
module.exports = {
  //   ，     
  entry: {
    app: './app.js' //     
  },

  //   
  output: {
    //    hash  js
    filename: '[name].[hash:8].js'
  },

  //   loader
  module: {

    // rules          
    rules:[
      {
        test: /\.js$/, //      ，             loade   
        use: {
          loader: 'babel-loader', //   bable-loader   
          options: { //     
            
          }
        },
        exclude: '/node_module/' //     
      }
    ]
  }
}

.babelrc 파일 설정

{
  "presets": [
    ["babel-preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 version"]
      } 
    }] 
  ],
  "plugins": ["transform-runtime"]
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.