>  기사  >  웹 프론트엔드  >  HTML로 이미지를 패키징하는 방법은 무엇입니까? HTML 이미지를 패키징하는 방법

HTML로 이미지를 패키징하는 방법은 무엇입니까? HTML 이미지를 패키징하는 방법

不言
不言원래의
2018-08-18 16:01:006262검색

이 글의 내용은 HTML로 이미지를 패키징하는 방법에 관한 것입니다. HTML 이미지를 패키징하는 방법에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Webpack에서는 HTML로 이미지를 패키징하는 방법은 무엇입니까? HTML 이미지를 패키징하는 방법 태그를 사용하여 이미지를 소개하는 것을 좋아하지 않지만 우리 프론트 엔드 사람들은 특히 이 작성 방법을 선호하며 중국에서도 개발했습니다. 이를 위해: html-withimg-loader. 그는 HTML에 이미지를 삽입하는 문제를 매우 잘 처리할 수 있습니다. 🎜#

** webpack은 webpack의 전역 설치를 권장하지 않습니다. 내부 명령 또는 외부 명령.

package.json에서 스크립트 옵션을 구성해야 합니다. 이전 과정에서 webpack-dev-server 명령을 구성하는 방법을 배웠습니다. build 명령을 사용하여 프로젝트를 패키징합니다.

      "scripts": {    
      "server": "webpack-dev-server --open",    
      "build":"webpack"
      },
  • Dist 디렉토리를 삭제하고, npm run build to package

    html로 사진 패키지: #🎜 🎜## 🎜🎜#이제 ==npm run build를 진행하세요==패키지된 이미지가 dist/images 디렉터리에 저장되지 않았습니다. url-loader 옵션을 구성해야 합니다
  • module:{        rules: [
                {
                  test: /\.css$/,
                  use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                  })
                },{               test:/\.(png|jpg|gif)/ ,
                   use:[{
                       loader:'url-loader',
                       options:{
                           limit:5000,
                           outputPath:'images/',                   }
                   }]
                }
              ]
        },
dist 삭제 디렉토리에

npm run build

패키지를 진행하면 이미지 폴더에 사진을 패키징할 수 있습니다.

Insert Pictures into index.html in the src 디렉토리

<p><img src="./images/10.jpg"></p>
# 🎜🎜#Install==html-withimg -loader==html에서

문제 해결

 npm install html-withimg-loader –save
로더 구성(webpack-config.js)

{    test: /\.(htm|html)$/i,
     use:[ &#39;html-withimg-loader&#39;] 
}

다시 패키지, dist에서 img 이미지가 /images 디렉터리에 나타납니다.

npm 서버 보기 브라우저 보기 HTML로 이미지를 패키징하는 방법은 무엇입니까? HTML 이미지를 패키징하는 방법
관련 권장 사항:

이미지 경로로 인해 웹팩 패키징 오류 발생 처리 방법

CSS 참조 이미지를 패키징한 후 리소스 파일을 찾을 수 없는 경우가 있습니다.

위 내용은 HTML로 이미지를 패키징하는 방법은 무엇입니까? HTML 이미지를 패키징하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.