Как настроить Webpack в проекте на Angular для копирования картинок из папки src в папку build?

Question

[timofy]

Есть один вопрос, пока не разобрался с ним: у меня webpack похоже не видит картинки. Содержимое для базовых файлов проекта я взял из следующей статьи про Angular. Исходя из статьи Стили и шаблоны компонента(конец статьи) добавил в проект модули для webpack raw-loader и html-loader
Строки файла webpack.config.js для обработки картинок:

{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

взял из этой статьи

как понимаю в результате после команды npm run build должна в папке 'public' появиться папка 'assets' с картинками, но этого не происходит. В документации "file-loader" написано, что нужно в js-ном файле прописывать строку "import img from './file.png';" как я понял: "чтоб file-loader мог таким образом подхватить файл картинки". Сейчас у меня в файле "app.component.css" прописан стиль:

#loginPopup {
background: url(./assets/images/authbg.jpg);
}

насколько знаю import(@import) в scss(css)-файлах используется для импортирования других scss(css)-файлов в текущий scss(css)-файл, а конструкция "import img from './file.png';" может прописываться только в js-ных файлах. Похоже это можно реализовать через какой-нибудь js-ный файл, который нужно будет специально создать, но по логике webpack должен независимо от того, что у меня прописано в файлах приложения, взять и скопировать все картинки из папки src в папку public(или dist) или webpack так не может делать или какие-то еще модули для webpack нужно добавить? Подскажите пожалуйста что еще не так или хотя бы подскажите в какую сторону смотреть? Заранее спасибо

Структура моего проекта:


Мой файл webpack.config.js:

webpack.config.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'app': './src/main.ts'
      },
   output:{
       path: path.resolve(__dirname, 'public'),     // путь к каталогу выходных файлов - папка public
       publicPath: '/',
       filename: "[name].js"       // название создаваемого файла
   },
   resolve: {
    extensions: ['.ts', '.js']
  },
   module:{
       rules:[   //загрузчик для ts
           {
               test: /\.ts$/, // определяем тип файлов
               use: [
                {
                    loader: 'awesome-typescript-loader',
                    options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
                  } ,
                   'angular2-template-loader'
               ]
            },{
               test: /\.html$/,
               loader: 'html-loader'
           }, {
               test: /\.css$/,
               include: path.resolve(__dirname,'src/app'),
               loader: 'raw-loader'
           },
           {
               test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
               loader: 'file-loader?name=assets/[name].[ext]'
           }
       ]
   },
   plugins: [
    new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core/,
        path.resolve(__dirname, 'src'), // каталог с исходными файлами
      {} // карта маршрутов
    )
  ]
};

Мой package.json:

package.json

{
  "name": "My_project",
  "version": "1.0.0",
  "description": "My project description",
  "author": "Name <[e-mail]>",
  "scripts": {
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack"
  },
  "dependencies": {
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "blueimp-md5": "^2.12.0",
    "body-parser": "^1.19.0",
    "connect": "^3.7.0",
    "connect-multiparty": "^2.2.0",
    "core-js": "^3.1.3",
    "express": "^4.17.1",
    "method-override": "^3.0.0",
    "mysql2": "^2.0.0",
    "rxjs": "^6.5.2",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@types/node": "^12.0.0",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^5.2.1",
    "file-loader": "^4.0.0",
    "html-loader": "^0.5.5",
    "raw-loader": "^1.0.0",
    "typescript": "^3.5.0",
    "webpack": "^4.32.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1"
  }
}

P.S. raw-loader использую сейчас версию 1.0.0, вначале установил версию 3.1.0 и при указании стилей через конструкцию styleUrls: ['./app.component.css'] была ошибка: "Expected 'styles' to be an array of strings."

Comments

[vadimMalovaniy]

Что то ты не то делаешь. Там вроде бы уже все с коробки работает. И ничего руками настраивать не нужно.

[timofy]

Я правильно понимаю: после команды npm run build (сборка проекта webpack-ом) картинки должны появиться в папке public независимо от того: обращался я к ним в проекте или нет. Правильно ?