웹팩 : 홈페이지 로더 이미지 경로 문제

이미지 경로를 처리 할 때 우리는 웹팩 패키지 항목을 사용, 두 개의 가장 일반적으로 사용되는 로더, URL-로더 및 파일 로더가있다.

우리가 쓰기 프로젝트의 경로를 참조 할 때, URL을 기입 우리의 개발의 경로를 기반으로하지만, 웹팩 포장에, 각 모듈은 상대하지 입구 HTML 파일을 기준으로 경로를 참조하는 파일로 포장됩니다 우리의 원본 파일 경로. 로더 프로그램은 URL이 도입 될 수 해결 한 구성에 따르면, 화상 경로 이미지 파일 경로를 장착 한 다음에 패키지의 각각의 경로로 복사.

파일 로더 및 URL 로더는이 문제를 해결할 수 있습니다. 그러나 URL 로더는 사진에 소개합니다 우리는 필요한 사진을 액세스 할 수있는이 문서의 도입을 인용, 인코딩, 당신은 크게 HTTP 요청의 수를 줄일 수 있습니다.

URL 로더 패키지 파일 로더,하지만 그에게 의존하지 않는, 그래서 우리는 만에 URL 로더를 설치해야합니다.

URL이 로더를 사용하는 경우, 잘못된 경로 참조의 경우가 있었다.

반복되는 문제

webpack.prod.js

module.exports = {
    // ...
    rules: [
        // ...
        {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
            // ...
            {
                loader: 'url-loader', //是指定使用的loader和loader的配置参数
                options: {
                    limit:500,  //是把小于500B的文件打成Base64的格式，写入JS
                    name: 'images/[name]_[hash:7].[ext]',
                }
            }
        ]
        },
        {
            test: /\.(css)$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', } ] ], } 复制代码

하는 index.js

import React from 'react';
import ReactDom from 'react-dom';
import './index.scss';
import logo from './logo.png';

ReactDom.render(
    <div>Hello world
        <img src={logo} />
    </div>,
    document.getElementById("root") ); 复制代码

index.css

#root {
    color: aqua;
    background: url('./logo.png');
};
复制代码

CSS 파일 패키지

#root{background:url(images/logo_e179a47.png);color:#0ff}
复制代码

패키지의 파일 구조 후

── CSS

│ └── app.9fd7e730df40df61cc5a.css

├── 이미지

│ └── logo_e179a47.png

├── JS

│ └── app.382da24eb9c30ee2.js

└── index.html을

우리는 브라우저에서 패키지 된 index.html을을 연 후

그림에서 볼 수 있듯이 우리는 제대로로드 작동하는 index.js을 도입,하지만 백그라운드에서 우리는 CSS가 성공적으로로드되지 소개합니다.

문제 원인

패키지에 웹팩은, 첫 번째 사진은 다음 / DIST / 이미지 / 폴더에 복사 한 다음 옵션을 웹팩 뾰족한 URL 경로 CSS 파일, 그 /images/logo.png 속성에서 경로 이름으로 대체하지만,이됩니다 경로는 /dist/css/~.css을 기준으로, 상대, 그래서 여기에 언급 된 파일 주소 중 하나입니다 : /dist/css/images/logo.jpg. 우리는 CSS 파일 폴더없이 이미지 / logo.png 포장, 그래서 후에 그러나 이미지는 렌더링되지 않습니다. 우리가하는 index.js 사진에서 참조에 대한 그러나, 여기가 사진을 찍을 수 있으며, 상대 경로가 index.html을 상대입니다.

솔루션

 {
    test: /\.(css)$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../',
            }
        },
        {
            loader: 'css-loader',
        }
    ]
},
复制代码

CSS 파일에 로더를 구성 할 때, publicPath 속성을 추가 할 수 있습니다. 이 과정에서 우리는 / DIST / 이미지 / CSS 파일을 참조 할 때 폴더하지만, 경로가 대체됩니다 publicPath + 이름으로 복사 된 사진은 여전히 사진 패키지에 있습니다.

패키지 CSS 파일 후 :

#root{background:url(../images/logo_e179a47.png);color:#0ff}
复制代码

지금까지 프로젝트 CSS 파일 참조 JS 파일 경로와 기준 경로가 올바른 이미지 경로입니다.

https://juejin.im/post/5b8d1e926fb9a019b66e4657

[웹팩] --- URL 로더 이미지 경로 문제

웹팩 : 홈페이지 로더 이미지 경로 문제

추천