How to make Angular and Webpack friends?

Question

Angular

Good afternoon!
I understand how to build an Angular project under Webpack. I found an article that describes how to make friends between these two technologies ( https://metanit.com/web/angular2/9.1.php ). In principle, the site with off-documentation is about the same.
The snag for me is that I can't figure out why the build only includes js and html files??? Let's say I have pictures, or I want to globally connect css, or test interaction with the server by creating json with data (without importing it anywhere in the project). How can I make sure that some files are also included in this assembly (well, at least by regular copying using webpack)? They said that webpack is not simple, but I didn't believe it)
My webpack config:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/app/main.ts'
    },
    output: {
        path: path.resolve('dist'),
        publicPath: '/',
        filename: '[name].[hash].js'
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [{
                    loader: 'awesome-typescript-loader',
                    options: { configFileName: path.resolve('tsconfig.json') }
                } , 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: path.resolve('src', 'app'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: path.resolve('src', 'app'),
                loader: 'raw-loader'
            }]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
            path.resolve('./src'), // каталог с исходными файлами
            {} // карта маршрутов
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new ExtractTextPlugin('[name].[hash].css'),
        new webpack.NoEmitOnErrorsPlugin(),

        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                keep_fnames: true
            }
        }),

        new webpack.LoaderOptionsPlugin({
            htmlLoader: {
                minimize: false
            }
        })
    ]
};

The project structure is as follows:

When building in dist, it builds like this (4 files):

What do I need to change or add so that the final build has css, fonts, img folders from the app? It seems that there is processing in the modules (in the config) of these files, but in fact they are not generated!
Thanks in advance!

Answer 1

To include files (css etc.) in an existing project, it is enough to import them somewhere. If we are talking about the so-called assets (images, fonts, etc.), then you need to install an additional webpack plugin for this. I can’t remember offhand what it’s called, but something is connected with copying files. In my opinion, in the latest versions of Angular, it is included in the kit by default. In ionics, it is definitely there. It simply copies all files from a certain src folder (assets) to the same folder in dist.

Answer 2

not quite to the point of the question, but you can look at cli.angular.io
Actually, in addition to the console commands, webpack is used to build the project. Everything runs out of the box