HTMLで画像をパッケージ化するにはどうすればよいですか? HTML画像をパッケージ化する方法

この記事の内容は、HTMLで画像をパッケージ化する方法についてです。 HTML画像のパッケージ化方法は参考になると思います。

Webpack は、画像の導入にタグ を使用することを好みませんが、フロントエンド担当者は特にこの記述方法に熱心で、中国人もこのための html-withimg-loader を開発しました。 HTML に画像を導入する問題をうまく処理できます

プロジェクトのインストール: npm install –save-dev webpack

グローバル インストール: npm install -g webpack

** webpack は、webpack のグローバル インストールを推奨しません。ターミナル webpack を使用してプロジェクトをパッケージ化すると、それが内部コマンドでも外部コマンドでもないように見えます。

• package.json でスクリプト オプションを設定する必要があります。これまでのコースで webpack-dev-server コマンドを設定する方法を学習しました。このコマンドの下に、使用するプロジェクトをパッケージ化するビルド コマンドを追加します

  "scripts": {    
  "server": "webpack-dev-server --open",    
  "build":"webpack"
  },

dist ディレクトリを削除し、npm run build to package

画像を HTML にパッケージ化します:

さあ、次に進みます==npm run build==パッケージ化された画像は dist/images ディレクトリに配置されません。URL ローダーを設定する必要がありますオプション

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 パッケージングを実行すると、画像を image フォルダーにパッケージ化できます

src ディレクトリのindex.html に画像を挿入します

<p><img  src="/static/imghwm/default1.png"  data-src="./images/10.jpg"  class="lazy"   alt="HTMLで画像をパッケージ化するにはどうすればよいですか? HTML画像をパッケージ化する方法" ></p>

==html-withimg-loader をインストールします== HTMLの問題を解決するには

 npm install html-withimg-loader –save

ローダー(webpack-config.js)を設定

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

再度パッケージ化すると、img画像がdist/imagesディレクトリに表示されます

npm runサーバー ブラウザを確認してください

関連する推奨事項:

画像パスにより webpack パッケージ化が発生する エラーの処理方法

CSS 参照画像がパッケージ化された後にリソース ファイルが見つからない場合がある

以上がHTMLで画像をパッケージ化するにはどうすればよいですか? HTML画像をパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。