vue cli 3 image-webpack-loaderの構成

3339 ワード

vue cli 3 image-webpack-loaderを構成してピクチャを圧縮最適化する
インストール
npm install image-webpack-loader --save-dev

vueを設定します.config.js
chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
  }

プロジェクトパッケージを再起動ok