Изображения в стилях не обрабатываются загрузчиком файлов - PullRequest
Новая
       29

Изображения в стилях не обрабатываются загрузчиком файлов

0 голосов
/ 04 июля 2019

Я в настоящее время мигрирую AngularJs 1,7 в Angular 8,0 .Поэтому я использую свой webpack.config.js и просто расширил некоторые правила для обработки Angular соответствующего контента.

Итак, в чем дело?

Когда я ссылаюсь на изображение в моем Scss , которое принадлежит AngularJs компонентукак это: 

.my-image-container {
  background: url('../../assets/images/my-fancy-image.png')
}

вывод Css выглядит примерно так: 

.my-image-container {
  background: url('89a8d90asd8as8d0a8sdfa8fsd.png') // MD5 hashed file name
}

Но это не происходит с Scss , которыйприменяется к Угловому компоненту.В этом случае путь остается нетронутым.И это, очевидно, проблема, потому что я не копирую все ресурсы в мою папку dist, и, что еще хуже, простые имена файлов делают изображение оставленным в кэше браузера, даже если что-то изменилось в изображении.

Мой вопрос

Как можно получить имена файлов хешированных изображений для угловых связанных стилей?

WebPack config (только правила) 

rules: [{
  test: /[\/\\]@angular[\/\\].+\.js$/,
  parser: {
    system: true
  }
}, {
  test: /(?<!\.component)\.scss$/,
  use: [
    {
      loader: prod ? MiniCssExtractPlugin.loader : "style-loader"
    },
    {
      loader: "cache-loader"
    },
    {
      loader: "css-loader",
      options: cssLoaderOptions
    },
    {
      loader: "postcss-loader",
      options: {
        sourceMap: !prod
      }
    },
    {
      loader: "fast-sass-loader",
      options: {
        includePaths: [
          path.resolve(__dirname, "node_modules"),
          path.resolve(__dirname, "src")
        ]
      }
    }
  ]
}, {
  test: /\.component\.scss/,
  use: [
    {
      loader: "raw-loader"
    },
    {
      loader: "fast-sass-loader",
      options: {
        includePaths: [
          path.resolve(__dirname, "node_modules"),
          path.resolve(__dirname, "src")
        ]
      }
    }
  ]
}, {
  test: /\.ts|\.js?$/,
  exclude: /node_modules/,
  use: [{
    loader: "ts-loader"
  }, "angular-router-loader", "angular2-template-loader"]
}, {
  test: /(?<!\.component)\.html$/,
  use: [{
    loader: "ngtemplate-loader?relativeTo=" + (path.resolve(__dirname, "src"))
  }, {
    loader: "html-loader",
    options: {
      collapseWhitespace: true
    }
  }],
  exclude: [
    path.resolve(__dirname, "src/index.html"),
    path.resolve(__dirname, "src/index-cloud.html"),
    /node_modules/
  ]
}, {
  test: /\.component\.html$/,
  use: [{
    loader: "raw-loader"
  }]
}, {
  test: /\.(jpe?g|gif|png|svg|ico)$/,
  use: [{
    loader: "file-loader?relativeTo=" + (path.resolve(__dirname, "src/assets")),
    options: {
      name: "[hash].[ext]"
    }
  }]
}, {
  test: /.(woff|woff2|eot|ttf|otf)$/,
  use: [{
    loader: "file-loader",
    options: {
      name: "[hash].[ext]"
    }
  }]
}]

Некоторая информация о тестовых выражениях

Я различаю AngularJs и Angular .html и .scss таким образом, что я добавляю суффикс .component Angular файлы типа my-component.component.scss и my-component.component.html.Затем, чтобы применить разные загрузчики, я использую выражение с отрицательным прогнозом до , исключая Angular файлы из AngularJs загрузчиков, как я сделал для Scss и HTML как это: 

 /(?<!\.component)\.scss$/ // negative lookahead; excludes .component.scss but includes .scss

То же самое для 

/(?<!\.component)\.html$/
...