web-dev-qa-db-fra.com

Comment puis-je ajouter du hachage aux images et autres ressources statiques dans ionic pour le contournement du cache

J'ai étendu la configuration de packs Web par défaut dans Ionic v3 pour forcer la désactivation du cache . Je suis en mesure de générer des artefacts javascript générés par des empreintes digitales, mais je ne parviens pas à identifier les images et les fichiers JSON sous le dossier des actifs. J'ai pris l’aide de Bundled files and cache busting .

un extrait de webpack config.js

module.exports = {
  // ...
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
  },
  plugins: [
    new WebpackChunkHash({algorithm: 'md5'}) // 'md5' is default value
  ]
}

Ci-dessus, l’approche pour l’empreinte digitale des ensembles javascript et tout fonctionne bien. Je souhaite ajouter des hachages/images d’empreintes digitales et des fichiers JSON dans le dossier des actifs. J’ai utilisé la même approche pour les images, mais cela n’a pas fonctionné . J'ai étendu webpack config.js. et ajouté une nouvelle règle pour les images . Par défaut, Webpack copie directement les images et les éléments dans le dossier de sortie.

Copier Config.js

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },

ici, les images et les autres éléments sont directement copiés . J'ai ajouté une nouvelle règle dans le fichier étendu webpack.config.js mais le processus de construction l’ignore. Comment résoudre ce problème?

extrait de webpack config.js

 {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {

            name:'[name].[hash].[ext]',//adding hash for cache busting
            outputPath:'assets/imgs',
            publicPath:'assets/imgs'


        },

webpack.config.js entier

/*
 * The webpack config exports an object that has a valid webpack configuration
 * For each environment name. By default, there are two Ionic environments:
 * "dev" and "prod". As such, the webpack.config.js exports a dictionary object
 * with "keys" for "dev" and "prod", where the value is a valid webpack configuration
 * For details on configuring webpack, see their documentation here
 * https://webpack.js.org/configuration/
 */

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;

var optimizedProdLoaders = [
  {
    test: /\.json$/,
    loader: 'json-loader'
  },
  {
    test: /\.js$/,
    loader: [
      {
        loader: process.env.IONIC_CACHE_LOADER
      },

      {
        loader: '@angular-devkit/build-optimizer/webpack-loader',
        options: {
          sourceMap: true
        }
      },
    ]
  },
  {
    test: /\.ts$/,
    loader: [
      {
        loader: process.env.IONIC_CACHE_LOADER
      },

      {
        loader: '@angular-devkit/build-optimizer/webpack-loader',
        options: {
          sourceMap: true
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader',
        options: {

            name:'[name].[hash].[ext]',
            outputPath:'assets/imgs',
            publicPath:'assets/imgs'


        },
      },


      {
        loader: process.env.IONIC_WEBPACK_LOADER
      }
    ]
  }
];

function getProdLoaders() {
  if (process.env.IONIC_OPTIMIZE_JS === 'true') {
    return optimizedProdLoaders;
  }
  return devConfig.module.loaders;
}

var devConfig = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      },
      {
      test: /\.(jpg|png)$/,
         use: {
         loader: "file-loader",
         options: {
         name: "[name].[hash].[ext]",
         outputPath:'assets/imgs',
         publicPath:'assets/imgs'

    },
  }},
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin()
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

var prodConfig = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: '[name].js',
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  },

  module: {
    loaders: getProdLoaders()
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new ModuleConcatPlugin(),
    new PurifyPlugin()
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};


module.exports = {
  dev: devConfig,
  prod: prodConfig
}
javascriptangularwebpackionic3
16
Vikas

En utilisant webpack4, vous ne devriez pas avoir besoin de plugins ou de chargeurs supplémentaires.

Cela vous donnera l'option de nommage [contenthash].

En outre, il semble que ce bloc soit imbriqué dans le bloc test: .ts. 

{
    test: /\.(png|jpg|gif)$/,
    loader: 'file-loader',
    options: {

        name:'[name].[hash].[ext]',//adding hash for cache busting
        outputPath:'assets/imgs',
        publicPath:'assets/imgs'


    },

En fin de compte, vous pouvez faire quelque chose comme ceci:

        // Copy static assets over with file-loader
        {
            test: /\.(ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: 'file-loader', options: {name: '[name].[contenthash].[ext]'},
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: 'file-loader', options: {name: 'fonts/[name].[contenthash].[ext]'},
        },
        {
            test: /\.(jpg|gif|png|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: 'file-loader', options: {name: 'images/[name].[contenthash].[ext]'},
        }
    ]

Utiliser [chunkhash] à la place du contenu devrait toujours fonctionner. Si vous n'utilisez pas webpack4, faites-le, mais sinon, pour plus d'informations, consultez this dans le numéro pour obtenir des explications.

Pour plus d’aide, lisez le guide des performances de mise en cache à long terme de google et la dernière documentation de mise en cache de webpack .

1
adamrights

À l’aide de webpack-assets-manifest , vous pouvez générer une carte de noms d’actifs comportant des noms d’empreintes digitales, comme suit:

{
  "images/logo.svg": "images/logo-b111da4f34cefce092b965ebc1078ee3.svg"
}

À l'aide de ce manifeste, vous pouvez alors renommer les actifs du dossier de destination et utiliser les codes "correct", src ou href inclusifs dans votre projet.

Le correctif n'est pas spécifique à la structure.

0
o.v.