Возьмите изображения из атрибута HTML с Webpack - PullRequest
Новая
       32

Возьмите изображения из атрибута HTML с Webpack

0 голосов
/ 08 мая 2019

Я использую retinajs с Webpack для добавления @ 2x изображений.

Это работает нормально, за исключением случая, когда я создаю другой пакет для другого каталога, и изображения там не копируются.

При такой конфигурации: 

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');

let sportsPages= require('./src/pages.js').otherdirectoryPages;
otherdirectoryPages.push(new HtmlWebpackPlugin({
  inject: false,
  hash: false,
  template: '!!html-loader?interpolate!src/sections/otherdirectory/index.html',
  filename: 'index.html'
}));

let plugins = otherdirectoryPages;

plugins.push(new MiniCssExtractPlugin({
  filename: 'styles.css'
}));

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'dist/otherdirectory'),
    filename: 'main.js'
  },
  plugins: plugins,
});

Вот как я добавляю изображения в html:

<img src="~root/img/myimage.png" data-rjs="2" data-src="~root/img/myimage@2x.png">

и вот некоторые из моих основных настроек веб-пакета: 

 {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          attrs: ['img:src', 'img:data-src', 'source:src'],
          minimize: true,
          interpolate: true
        }
      },
{
        test: /\.(jpg|png|svg|ico)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name(file) {
              let fileName = path.basename(file);
              //console.log(fileName);
              if (fileName == 'favicon-16x16.png' || fileName == 'favicon.ico' || fileName == 'favicon-32x32.png' || fileName == 'apple-touch-icon.png' || fileName == 'safari-pinned-tab.svg'){
                return '[name].[ext]';
              } else {
                return 'img/[name].[ext]';
              }
            },
          }
        }]
      },

Изображения @ 2x не копируются в каталог dist / other, а только для основного пакета в /dist.

Чего мне не хватает?

...