웹 팩 2 와 모듈 패키지 에 대한 초보 자 가이드(소결)
본 고 는 주로 웹 팩 을 처음 접 한 학생 들 을 대상 으로 초기 설정 과 설정,모듈,로 더,플러그 인,코드 분할 과 열 모듈 교 체 를 소개 합 니 다.
다음 내용 을 계속 공부 하기 전에 컴퓨터 에 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
"scripts": {
"start": "webpack --watch",
"build": "webpack -p"
},
현재 브 라 우 저 에 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 를 사용 하여 그것 을 압축 했 기 때 문 입 니 다.이렇게 되면 우 리 는 이전 과 같은 효 과 를 얻 기 위해 더 적은 코드 를 사용 할 수 있다.모듈
우수한 웹 팩 은 다양한 형식의 자 바스 크 립 트 모듈 을 어떻게 사용 하 는 지 알 고 있 습 니 다.가장 유명한 두 가 지 는:
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
// webpack.config.js
rules: [{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}, {
// ...
}]node-sass의 임의의 로드 규칙 을 변경 할 때webpack.config.js와Ctrl + C를 사용 하여 구축 을 다시 시작 해 야 합 니 다.로 더 시퀀스 는 반대 순서 로 처 리 됩 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
