웹 팩 구덩이 밟 는 길 그림 의 경로 와 포장

처음에 웹 팩 을 사용 한 학생 들 은 그림 으로 이 구덩이 에 쉽게 빠 졌 다.예 를 들 어 포 장 된 그림 주소 가 틀 리 거나 어떤 그림 은 우리 의 목표 폴 더 에 포장 할 수 없다(bundle).웹 팩 프로젝트 에서 그림 의 응용 장면 을 분석 해 보 겠 습 니 다.
실제 생산 에서 다음 과 같은 몇 가지 그림 의 인용 방식 이 있다.
1.HTML 파일 에서 img 태그 의 src 속성 참조 또는 내장 스타일 참조

<img src="photo.jpg" />
<div style="background:url(photo.jpg)"></div>

2.CSS 파일 의 배경 그림 등 설정

.photo {
  background: url(photo.jpg);
}

3.자 바스 크 립 트 파일 에 동적 으로 추가 되 거나 변 경 된 그림 참조

var imgTempl = '<img src="photo.jpg" />';
document.body.innerHTML = imgTempl;

4.ReactJS 의 그림 참조

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (<img src='photo.jpg' />);
  }
}

ReactDom.render(<App />, document.querySelector('#container'));

url-loader
웹 팩 에 그림 을 도입 하려 면 url-loader 라 는 프로세서 에 의존 해 야 합 니 다.
설치:

npm install url-loader --save-dev

물론 설정 에 기록 하고 다른 도구 모듈 과 함께 설치 할 수 있 습 니 다.
웹 팩.config.js 파일 에 다음 과 같이 설정 합 니 다.

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192'
　　　　}
　　]
}  

test 속성 은 일치 하 는 그림 형식 을 대표 합 니 다.png,jpg 외 에 도 gif 등 을 추가 하여 세로 선 으로 분리 하여 열 수 있 습 니 다.
loader 뒤의 limit 필드 는 그림 포장 제한 을 대표 합 니 다.이 제한 은 초과 하면 포장 할 수 없다 는 것 이 아니 라 그림 크기 가 제한 보다 작 을 때 자동 으로 base 64 야드 참조 로 전환 하 는 것 을 말 합 니 다.상례 에서 8192 바이트 이상 의 그림 은 정상적으로 포장 되 고 8192 바이트 이하 의 그림 은 base 64 방식 으로 인용 된다.
url-loader 뒤에 limit 필드 를 제외 하고 name 필드 를 통 해 그림 포장 디 렉 터 리 와 파일 이름 을 지정 할 수 있 습 니 다.

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.(png|jpg)$/,
　　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
　　　　}
　　]
}

 위의 name 필드 는 패키지 루트 디 렉 터 리(output.path)에서 images 라 는 폴 더 를 만 들 고 원래 그림 이름 앞 에 8 비트 hash 값 을 추가 합 니 다.
프로젝트 목록

main.css 에서 동급 images 폴 더 의 bg.jpg 그림 을 참조 하 였 습 니 다.

background-image: url(./images/bg.jpg);

이전 설정 을 통 해$webpack 명령 으로 코드 를 포장 한 후 다음 디 렉 터 리 를 생 성 합 니 다.

패키지 디 렉 터 리 에서 css 파일 과 images 폴 더 는 같은 등급 을 유지 하고 작업 수정 없 이 그림 에 접근 할 수 있 습 니 다.포장 한 그림 에 hash 값 을 추가 한 것 과 달리 bundle.css 파일 에 도 hash 값 이 있 는 그림 이 도입 되 었 습 니 다.

background-image: url(images/f593fbb9.bg.jpg);

(상례 에서 css 를 단독으로 포장 하 는 기술 을 사 용 했 는데,단지 시연 을 편리 하 게 하기 위해 서 였 다)
publicPath
output.publicPath 는 자원 의 발표 주 소 를 표시 합 니 다.이 속성 을 설정 한 후,패키지 파일 에 상대 적 인 경 로 를 통 해 인 용 된 모든 자원 은 설 정 된 경로 로 대 체 됩 니 다.

output: {
　　path: 'dist',
　　publicPath: '/assets/',
　　filename: 'bundle.js'
}

main.css

background-image: url(./images/bg.jpg);

bundle.css

background-image: url(/assets/images/f593fbb9.bg.jpg);

이 속성의 장점 은 그림 CDN 의 주 소 를 설정 하고 로 컬 개발 시 로 컬 그림 자원 을 참조 하여 온라인 으로 포장 할 때 자원 을 모두 CDN 에 가리 키 는 것 입 니 다.
그러나 정확 한 발표 주소 가 없 으 면 이 속성 을 설정 하 는 것 을 권장 하지 않 습 니 다.그렇지 않 으 면 포장 한 자원 경 로 를 혼 란 스 럽 게 할 수 있 습 니 다.
JS 사진
웹 팩 으로 프로젝트 개발 을 처음 진행 한 동창 회 는 js 나 react 에서 인용 한 그림 이 bundle 폴 더 에 포장 되 지 않 았 음 을 발견 했다.
정확 한 쓰기 방법 은 모듈 화 된 방식 으로 그림 경 로 를 인용 해 야 합 니 다.이렇게 인용 한 그림 은 bundle 폴 더 에 성공 적 으로 포장 할 수 있 습 니 다.
js

var imgUrl = require('./images/bg.jpg'),
  imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;

react

render() {
  return (<img src={require('./images/bg.jpg')} />);
}

HTML 의 그림
웹 팩 은 html 에 대한 처리 가 좋 지 않 기 때문에 HTML 파일 의 이미지 자원 을 포장 하 는 것 이 상대 적 으로 가장 번 거 로 운 것 입 니 다.html-withimg-oder 플러그 인 을 참조 해 야 합 니 다.

$ npm install html-withimg-loader --save-dev

webpack.config.js 설정 추가

module: {
　　loaders: [
　　　　{
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　}
　　]
}

bundle.js 에서 html 파일 참조

import '../index.html';

이렇게 html 파일 의 그림 을 bundle 폴 더 에 포장 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.