2016-08-10 18 views
1

現時点では私のCSSとimgタグの内部にdata:を通してbase64イメージを使用しています。これはファイル全体にbase64コードを含めることで本当に乱雑になることが想像できるので、それをインポートする方法があるかどうかを知りたい外部ファイルからどうやってwebpackでこれらを処理するのですか?他のファイルのbase64イメージを含む?

+0

webpackについてはわかりませんが、イメージをpngまたはjpgファイルとして保存して、あなたのCSSを 'url( 'yourFile.png')'に設定してください;-)もっと真剣に、なぜdataURIバージョン? – Kaiido

+0

または、2つの.cssファイルを使用できます。 1つのファイルにすべてのスタイルが含まれます。また、他のファイルには、関連するスタイルのbase64イメージが含まれています。 –

+0

@Kaiidoはこのようにして、httpリクエストを追加します+スタイルシートと一緒にイメージを読み込むようにします。 – Ilja

答えて

0

のWebPACKのurl-loaderは、まさにこの目的のために作られています!

ちょうどあなたのWebPACK-config設定のローダーにこれを追加し、それを設定するには:

{ 
    test: /\.(svg|jpg|png|gif)$/, 
    loader: 'url?limit=10000', 
} 

URLローダは、それのサイズが指定した制限値を下回っている場合は、/インポートが必要なファイルのデータURIを返します。それ以外の場合は、ファイルをバンドルしてURLを返します。

制限はバイト単位で指定されているため、10000はおよそ10kB未満のファイルがデータURIとして返されることを意味します。制限を指定しないと、すべてがデータURIとしてエンコードされます。私はあなたが小さなファイルのためにそれを使用することをお勧めします。

これで、セットアップが完了したら、var smallImageUri = require('./smallImage.png');は必要なものを正確に提供するはずです。 smallImage.pngが設定された制限を下回る場合はデータURI、大きい場合はバンドルされた画像のURL。

0

gulp-css-base64プラグインを使用すると、画像が保存されているフォルダからすべての画像を読み取ることができます。 gulpタスクを実行するたびに、新しいイメージでcssファイルを更新します(または現在のイメージを更新します)。

gulp.task('default', function() { 
    return gulp.src('src/css/input.css') 
     .pipe(cssBase64({ 
      baseDir: "../../images", 
      maxWeightResource: 100, 
      extensionsAllowed: ['.gif', '.jpg'] 
     })) 
     .pipe(gulp.dest('dist')); 
}); 
関連する問題