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

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

Webpack에서는 태그를 사용하여 이미지를 소개하는 것을 좋아하지 않지만 우리 프론트 엔드 사람들은 특히 이 작성 방법을 선호하며 중국에서도 개발했습니다. 이를 위해: 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="/static/imghwm/default1.png"  data-src="./images/10.jpg"  class="lazy"   alt="HTML로 이미지를 패키징하는 방법은 무엇입니까? HTML 이미지를 패키징하는 방법" ></p>

# 🎜🎜#Install==html-withimg -loader==html에서

문제 해결

 npm install html-withimg-loader –save

로더 구성(webpack-config.js)

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

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

npm 서버 보기 브라우저 보기
관련 권장 사항:

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

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

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