it-swarm.com.de

Wie füge ich Bilder und andere statische Assets in ionic Hash hinzu, um das Cache-Busting zu ermöglichen?

Ich habe die Standard-Web-Pack-Konfiguration in Ionic v3 für das Erzwingen von Cache-Buster erweitert. Ich bin in der Lage, generierte Javascript-Artefakte mit dem Fingerabdruck zu erzeugen, kann jedoch keine Bilder und JSON-Dateien unter dem Ordner "Assets" abdrucken. Ich habe Hilfe von Bundled files and cache busting genommen.

ein Auszug von webpack config.js

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

Oben ist der Ansatz für das Fingerprinting von JavaScript-Bundles, und es funktioniert in Ordnung. Ich möchte Hashes/Fingerprint-Bilder und JSON-Dateien in Assets-Ordner hinzufügen. Ich habe den gleichen Ansatz für Bilder verwendet, aber es funktionierte nicht. Ich habe das webpack config.js erweitert und fügte eine neue Regel für Bilder hinzu. Standardmäßig kopiert webpack die Bilder und Elemente direkt in den Ausgabeordner.

Config.js kopieren

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'
  },

hier werden Bilder und andere Elemente direkt kopiert . Ich habe eine neue Regel in der erweiterten webpack.config.js hinzugefügt, aber der Buildprozess ignoriert sie. Wie kann ich dieses Problem beheben?

auszug aus 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'


        },

gesamte Webpack.config.js

/*
 * 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
}
16
Vikas

Mit webpack4 sollten Sie keine zusätzlichen Plugins oder Loader benötigen.

Sie erhalten die Namensoption [contenthash].

Es sieht außerdem so aus, als hätten Sie diesen Block im Test: .ts-Block verschachtelt. 

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

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


    },

Letztendlich kannst du so etwas tun:

        // 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]'},
        }
    ]

Die Verwendung von [chunkhash] anstelle von Inhalten sollte weiterhin funktionieren. Wenn Sie nicht webpack4 verwenden, tun Sie das. Andernfalls finden Sie weitere Informationen unter this .

Weitere Informationen finden Sie im Langzeit-Caching-Leistungshandbuch von google und in der neuesten Caching-Dokumentation von webpack .

1
adamrights

Mit webpack-assets-manifest können Sie eine Zuordnung von Asset-Namen zu mit Fingerabdrücken versehenen Namen erstellen, z.

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

Mit diesem Manifest können Sie dann die Assets im Zielordner umbenennen und die "korrekte", Hash-inklusive src oder href in Ihrem Projekt verwenden.

Der Fix ist nicht rahmenspezifisch.

0
o.v.

die über CopyPlugin kopierten Dateien werden nicht an Loader übergeben. Selbst wenn Sie die richtige Einstellung für den Lader mit dem Hashnamen für Bilder haben, funktioniert dies nicht.

aber Sie können sehen, https://github.com/webpack-contrib/copy-webpack-plugin#template

das CopyPlugin bietet Ihnen die Möglichkeit, einen Ausgabenamen anzugeben, der mit einem Hash festgelegt werden kann:

module.exports = {
  plugins: [
    new CopyPlugin([
      {
        from: 'src/',
        to: 'dest/[name].[hash].[ext]',
        toType: 'template',
      },
    ]),
  ],
};
0
Yi Feng Xie