Webpack

webpackを使用してcssスプライトを生成する方法を教えてください



Teach You How Use Webpack Generate Css Sprites



序文

Webサイトを開発するときは、通常、一般的に使用されるアイコンをcssスプライトに結合します。これにより、サイトからのhttpリクエストの数を効果的に減らし、Webサイトのパフォーマンスを向上させることができます。

使い方を見てみましょう。| ​​_ + _ |スプライト図をマージします。



準備ができました

  • webpack
  • webpackプラグイン
  • webpack-spritesmith
  • file-loader（sass-loaderスプライトを生成するだけでなく、対応するwebpack-spritesmithを生成するので非常に便利なので使用してくださいmixin）
  • ここでも使用しました。sass cssファイルを抽出するために、これは必要ありません。使用することもできます。必要な場合は、インストールする必要があります。ExtractTextPluginこのプラグイン

npmを使用して上記をインストールします

以下からパフォーマンスを開始してください

ステップ1：マージするアイコンを準備し、srcの下のicoフォルダーの下に置きます

便利なアイコンダウンロードサイトをご紹介します。中のアイコンスタイルが好きで、無料です。この演習で使用するアイコンをダウンロードすることもできます。



57,900の無料フラットアイコン

これは私がダウンロードしたpng画像です。

フェイスブック



ツイッター

グーグル

Step2はwebpack.config.jsに次のように記述されています

extract-text-webpack-plugin

ステップ3 const path = require('path') const SpritesmithPlugin = require('webpack-spritesmith') module.export = { // ... module: { rules: [ { test: /png$/ loader:[ 'file-loader?name=i/[hash].[ext]' ] }, { test: /.(css|scss)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader'] }) } ] }, resolve: { modules: [ 'node_modules', 'assets/sprite' // Where can css find sprite maps? ] }, plugins: [ new SpritesmithPlugin({ src: { cwd: path.resolve(__dirname, 'src/ico'), / / Prepare to merge into a sprit image storage folder glob: '*.png' //What kind of picture }, target: { image: path.resolve(__dirname, 'src/assets/sprites.png'), // sprite image save path css: path.resolve(__dirname, 'src/assets/_sprites.scss') // Where is the generated sass saved? }, apiOptions: { cssImageRef: '~sprite.png' //css find the sprite map according to the guide } }) ] }Copy codeファイル内scss生成されたファイルをインポートする

@import

ステップ4webpackを実行して、スプライトマップがサイトで使用されていることを確認します。

/assets/sprite/sprite.pngは、生成したスプライトマップです。

同時に生成されたsassファイルを見てください

@import '../../../assets/sprite/_sprite.scss' //Please change your path .facebook{ @include sprite($facebook) } .twitter{ @include sprite($twitter) } .google{ @include sprite($google) }Copy code

最後に、サイトでのアプリのパフォーマンスを確認します。

総括する

さて、上記はwebpackがcsスプライトを生成する方法です。とても簡単ですか？この記事がお役に立てば、ぜひ気に入ってください。

この記事は、2017-10-3にZhangXiaodianによってNuggetsに掲載されました。出典を示してください。 元のリンク

参照

転載：https：//juejin.im/post/59d2f80d6fb9a00a6a7466aa