vueでイマジ・ウェbpack-loaderを使用した例

2420 ワード

vue イメージ webpack loader

まずwebpack.base.co.nfi.jsを開けます。
ヒント：ここでurl-loaderとimage-webpack-loaderは一緒に使うことができません。でないと、画像が出てこなくなります。
続いて見つけます


 module: {
  rules: [
   {}...
  ]
}

ここに書き込んでください。まず「file-loader」を書いてこそ、「image-webpack-loader」が使えます。
いろんな配置があります。圧縮した後の画像の品質を調整できます。
ヒント：webpを使うと体積が大幅に減少しますが、iosはこのフォーマットをサポートしていません。iosでは画像が見えなくなります。


 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: [
     {
     loader: 'file-loader',
     options: {
       name: '[name].[hash:7].[ext]',
       outputPath: 'mobile/img'
      }
     },
     {
      loader: 'image-webpack-loader',
      options: {
       mozjpeg: {
        progressive: true,
        quality: 50
       },
       // optipng.enabled: false will disable optipng
       optipng: {
        enabled: false,
       },
       pngquant: {
        quality: [0.5, 0.65],
        speed: 4
       },
       gifsicle: {
        interlaced: false,
       },
       //ios   
       // webp: {
       //  quality: 100
       // }
      }
     }
    ]
   },

知識を補充します：一回のvue-cli 3の中でmage-webpack-loaderピクチャーが最適化することを覚えます。
コマンドラインnpm install-save-dev image-webpack-loaderが開発環境で最適化パッケージをダウンロードした後、vue.co.nfig.js(vue-cli 3プロファイル)では以下のように使用されます。

コード：chainWebpack関数下


config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()

でもこうしてdev以降は

文字化けの山の新聞の誤り
私の同僚もこれを使っていますが、イマジ・ウィbpack-loaderモジュールが見つけられないというエラーがありました。
百度、フォーラムを見ています。この問題に遭遇した人はいますが、解決した人はいません。
後ろを見てみましたが、インストールの問題を見つけました。npmをダウンロードした時に壁を越える問題で、パッケージのダウンロードが不完全です。
後ろのnpm uninstall image-webpack-loaderはカバンを削除しました。
そしてcnpm install--save-dev marge-webpack-loaderのミラーダウンで解決しました。

技術のない涙を流しました。
以上のvueでイマジネーションwebpack-loaderを使った例は、小編集が皆さんに共有している内容のすべてです。参考にしていただければと思います。どうぞよろしくお願いします。

asp.netで画像をサーバーにアップロードする方法を詳しく説明します。

flexはexcelをエクスポートして具体的に実現します。