image-webpack-loader로 이미지 압축 자동화

4567 단어 webpack
웹용으로 최적화되지 않은 큰 이미지(아마도 수 메가바이트)를 참조하는 <img> 태그가 포함된 HTML 파일이 있다고 가정해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <img src="/stock.jpeg" alt="some photo">
</body>
</html>


Webpack을 image-webpack-loader과 함께 사용하여 stock.jpeg의 웹 최적화 버전이 생성되고 대신 <img> 태그가 이를 참조하는 이 HTML 파일에서 번들을 생성할 수 있습니다.

단순화된 시나리오의 경우 이 최소값webpack.config.js이 작업을 수행합니다.

const path = require("path");

module.exports = {
  entry: "./src/index.html",
  output: {
    filename: "index.html",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        loader: "image-webpack-loader",
      },
    ],
  },
};


내 테스트에서 4.5MB 파일의 크기가 900KB로 줄었습니다.

참조


  • https://webpack.js.org/concepts/
  • https://webpack.js.org/guides/getting-started/
  • https://github.com/tcoopman/image-webpack-loader
  • https://iamakulov.com/notes/optimize-images-webpack/
    • JavaScript의 기호
    ReactJs로 이미지 파일 미리보기.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage