전단 학습 노트 - webpack 사용
8196 단어 웹 전단 학습 노트
웹 팩 이란 무엇 입 니까?
웹 팩 은 모듈 패키지 로 볼 수 있 습 니 다. 프로젝트 구 조 를 분석 하고 자바 스 크 립 트 모듈 과 다른 브 라 우 저 에서 직접 실행 할 수 없 는 확장 언어 (Scss, TypeScript 등) 를 찾 아 브 라 우 저 에 적합 한 형식 으로 포장 하 는 것 입 니 다.
WebPack 은 Grunt 와 Gulp 에 비해 어떤 특성 이 있 습 니까?
사실 웹 팩 과 다른 두 가 지 는 비교 가능성 이 많 지 않다. Gulp / Grunt 는 전단 의 개발 절 차 를 최적화 할 수 있 는 도구 이 고 웹 팩 은 모듈 화 된 해결 방안 이지 만 웹 팩 의 장점 으로 인해 웹 팩 은 Gulp / Grunt 류 를 대체 할 수 있다.
Grunt 와 Gulp 의 작업 방식 은:
하나의 프로필 에서 일부 파일 에 대해 컴 파일, 조합, 압축 등 작업 과 유사 한 구체 적 인 절 차 를 가리 키 며 이 도 구 를 사용 하면 자동 으로 이 작업 을 완성 할 수 있 습 니 다.
웹 팩 의 작업 방식 은:
프로젝트 를 하나의 전체 로 생각 하고 주어진 주 파일 (예: index. js) 을 통 해 웹 팩 은 이 파일 부터 프로젝트 의 모든 의존 파일 을 찾 습 니 다. loaders 로 처리 하고 마지막 으로 브 라 우 저 에서 인식 할 수 있 는 자바 스 크 립 트 파일 로 포장 합 니 다.
무엇이 모듈 화 입 니까?
js 파일 은 독립 적 인 차단 역할 영역 입 니 다.js 파일 을 대상 으로 할 수 있 습 니 다.모듈 화 에서 a 파일 이 b 파일 에 접근 해 야 할 내용 이 있 으 면 밖으로 노출 되 어야 합 니 다.
모듈 화 된 방식:
1). require. js --- > > amd 규범 에 따른다.
2).es6model
출력
export
끌어들이다
import
3). node. js 가 제공 하 는 --- > common. js 규범
//밖으로 드러나다
module.exports= ;
//다른 파일 노출 내용 도입
//경로 의 쓰기:
1. 현재 경로 에서 파일 을 찾 으 려 면 '. /' 을 써 야 합 니 다.
2. node 에서modules 에서 모듈 을 찾 으 면 모듈 이름 을 직접 씁 니 다.
2. node 에서modules 에서 모듈 을 찾 으 면 모듈 이름 을 직접 쓰 고 찾 지 못 하면 node 내장 에서 찾 고 찾 지 못 하면 이상 을 던 집 니 다.
웹 팩 이 지원 하 는 이상 모듈 화 된 모듈 화 방식
loader, 플러그 인 을 통 해 파일 을 미리 설정 합 니 다.
2. 웹 팩 설치
1. 타 오 바 오 미 러 설치
npm install -g cnpm --registry=https://registry.npm.taobao.org
PS: 타 오 바 오 미 러: npm 설치 플러그 인 은 외국 서버 에서 다운로드 되 기 때문에 네트워크 의 영향 을 많이 받 아 이상 이 생 길 수 있 습 니 다. npm 서버 가 중국 에 있 었 으 면 좋 겠 습 니 다. 그래서 우 리 는 기꺼이 공유 하 는 타 오 바 오 팀 이 이 일 을 했 습 니 다.이것 은 완전한 npmjs. org 미 러 입 니 다. 공식 버 전 (읽 기 전용) 을 대체 할 수 있 습 니 다. 동기 화 빈 도 는 현재 10 분 에 한 번 으로 공식 서비스 와 동기 화 할 수 있 습 니 다.
2. 전역 웹 팩 설치
cnpm install -g webpack
3. 버 전 보기
webpack –v
4. 로 컬 설치 (프로젝트 경로 에 설치)
cnpm init //package. json 파일 만 들 기
cnpm install webpack--save-dev
약자: cnpmi webpack – D
/ / 마 운 트 해제: cnpm uninstallwebpack -- save - dev
5. 완료 후 package. json 파일 에 나타 납 니 다:
//프로젝트 의 개발 의존 이란 프로젝트 가 개발 과정 에서 플러그 인 을 사용 해 야 하지만 프로젝트 를 발표 한 후에 더 이상 사용 할 필요 가 없다 는 것 을 말한다.
"devDependencies":{
"webpack": "^3.1.0"
}
//프로젝트 의 생산 의존 이란 프로젝트 가 개발 과정 에서 플러그 인 을 사용 해 야 하지만 프로젝트 를 발표 한 후에 도 사용 해 야 한 다 는 것 을 말한다.
예: cnpm install jquery -- save
cnpm install jquery-S
완료 후 package. json 파일 에 나타 납 니 다:
"dependencies":{
"jquery": "^3.2.1"
}
6. webpack 만 있 으 면 자 바스 크 립 트 파일 만 컴 파일 할 수 있 습 니 다. 다른 파일, css, html, es6, vue, jsx, ts 를 컴 파일 하려 면 loader 로 더 로 더 가 필요 합 니 다.
예 를 들 면:
Css:
css 파일 을 컴 파일 하려 면 두 개의 loader 가 필요 합 니 다: css - loader style - loader
설치 명령: cnpm install css - loader style - loader – D
설치 후 package. json 파일 에서 의존 도 를 볼 수 있 습 니 다.
ES6：
플러그 인 플러그 인 es6 화살표 함수 es6promise es6modle es6class
사전 설정 es6 모든 플러그 인 을 포장 하여 미리 설정 합 니 다.
es6 문법 을 컴 파일 하 는 loader: babel - loader
첫 번 째 설 치 는 전역 적 으로 babel 명령 을 설치 해 야 합 니 다.
npm install -g babel-cli
로 컬 설치
npm install babel-loaderbabel-core -D
//babel - loader: babel 캐리어
//babel - core: babel 핵심 문법
es6 설치
npm installbabel-preset-es2015 -D
babel 컴 파일 규칙 은. babelrc 파일 설정 이 필요 합 니 다.
.babelrc 파일 아래:
{presets:['es2015']}
3. 웹 팩 조작
방식 1: node. js 가 제공 하 는 --- > common. js 규범
1. 웹 팩 으로 원본 파일 과 대상 파일 편집
원본 파일, 즉 외부 로 노출 된 파일, 예 를 들 어:
person. js 아래:
/ / 노출 대상 정의
module.exports= {
age:40,
name:"zhangsan"
}대상 파일, 즉 입구 파일, 예 를 들 어:
entry. js 아래:
//
var p = require("./person.js");
// css
require("../css/style.css");
//
var str = `
:${p.name},
:${p.age}
`;
//
document.querySelector('#box').innerText = str;2. webpack 설정 파일 편집: webpack. config. js:
module.exports = {
//
entry:'./js/b.js',
//
output:{
//__dirname nodejs ,
path:__dirname,
filename: 'dest/app.js'
}
//
module:{
// loader
loaders:[
// loader
{
test:/\.css/,
// ， ， !
//css-loader css ，style-loader
loader:"style-loader!css-loader"
}
]
}
}3. webpack 을 실행 하고 app. js 를 포장 하여 index. html 파일 에 도입 합 니 다. 즉, 브 라 우 저 에서 식별 할 수 있 는 자바 스 크 립 트 파일 입 니 다. 모든 파일 은 이 js 파일 에 의존 하여 완 료 됩 니 다.
방식 2 <. es6 모델 > >
방법 이 유사 하고 다른 점 은 다음 과 같다.
1) 노출 방식 과 입구 가 다르다.
2) ES6 를 컴 파일 할 때 사용 하 는 모듈 도 도입 해 야 한다.
3) babel 컴 파일 규칙 은. babelrc 파일 설정 이 필요 합 니 다.
. babelrc 파일 아래:
{presets:['es2015']}
1. 웹 팩 으로 원본 파일 과 대상 파일 편집
원본 파일, 즉 외부 로 노출 된 파일, 예 를 들 어:
person. js 아래:
/ / 밖으로 노출 되 고 노출 대상 을 정의 하려 면 ES6 문법 에 따라 엄 격 히 작성 해 야 합 니 다. 컴 파일 할 때 엄격 하기 때 문 입 니 다. / ES6 문법 에 따라 컴 파일 해 야 합 니 다. 그렇지 않 으 면 오 류 를 보고 할 수 있 습 니 다.
var name = "zhangsan";
var name1 = "lisi";
export{
name,
name1
}대상 파일, 즉 입구 파일, 예 를 들 어:
entry. js 아래:
// css
require("../css/style.css");
//
import {name,name1}from "./person.js";
console.log(name,name1);2. webpack 설정 파일 편집: webpack. config. js:
module.exports = {
//
entry:'./js/b.js',
//
output:{
//__dirname nodejs ,
path:__dirname,
filename: 'dest/app.js'
}
//
module:{
// loader
loaders:[
// loader
{
test:/\.css/,
// ， ， !
//css-loader css
//style-loader
loader:"style-loader!css-loader"
},
{
test:/\.js/,
loader:"babel-loader",
//node_modules ，
exclude:/node_modules/
}
]
}
}3. ES6 에서 변수, 대상, 함수, 클래스 의 도입 과 출력 방식
//1、
//
var obj = {
name1: 'zhangsan',
name2: 'lisi',
name3: 'wangwu'
}
export default obj;
//
import obj from'./person.js'
//2、
//
var name1 ='zhangsan';
var name2 = 'lisi';
var name3 ='wangwu';
export {name1,name2, name3}
// ，
import {name1,name2, name3} from './person.js'
import {name1,name2} from './person.js'
import {name1} from'./person.js'
//3、
//
var name1 ='zhangsan';
var name2 = 'lisi';
var name3 ='wangwu';
export {name1,name2, name3}
//
import {name1 asn1, name2, name3} from './person.js'
//4、
//
export defaultfunction(){
console.log(123);
}
//
import fun from'./person.js'
fun();
//5、
//
export defaultclass P{
constructor(name, age){
this.name = name;
this.age = age;
}
say(){
console.log(`name:${this.name},age:${this.age}`);
}
}
//
import Person from'./person.js'
var p1 = newPerson('zhangsan', 10);
p1.say();이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript 페이지 표시 실현저 는 페이지 디 스 플레이 를 구축 하 는 방법 을 공유 합 니 다. 1. 페이지 디 스 플레이 수 는 페이지 총수 보다 작 습 니 다.이 경우 현재 몇 페이지 든 모든 페이지 를 표시 해 야 합 니 다. 2. 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
