이 글의 내용은 HTML로 이미지를 패키징하는 방법에 관한 것입니다. HTML 이미지를 패키징하는 방법에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
Webpack에서는 태그를 사용하여 이미지를 소개하는 것을 좋아하지 않지만 우리 프론트 엔드 사람들은 특히 이 작성 방법을 선호하며 중국에서도 개발했습니다. 이를 위해: html-withimg-loader. 그는 HTML에 이미지를 삽입하는 문제를 매우 잘 처리할 수 있습니다. 🎜#
** webpack은 webpack의 전역 설치를 권장하지 않습니다. 내부 명령 또는 외부 명령. package.json에서 스크립트 옵션을 구성해야 합니다. 이전 과정에서 webpack-dev-server 명령을 구성하는 방법을 배웠습니다. build 명령을 사용하여 프로젝트를 패키징합니다."scripts": { "server": "webpack-dev-server --open", "build":"webpack" },
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:[ 'html-withimg-loader'] }
다시 패키지, dist에서 img 이미지가 /images 디렉터리에 나타납니다.
npm 서버 보기 브라우저 보기
관련 권장 사항:
이미지 경로로 인해 웹팩 패키징 오류 발생 처리 방법
CSS 참조 이미지를 패키징한 후 리소스 파일을 찾을 수 없는 경우가 있습니다.
위 내용은 HTML로 이미지를 패키징하는 방법은 무엇입니까? HTML 이미지를 패키징하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!