const HtmlWebpackPlugin = require('html-webpack-plugin')
const Dotenv = require('dotenv-webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
const ESLintPlugin = require('eslint-webpack-plugin')
const path = require('path')

module.exports = {
 mode: 'development',
 entry: path.resolve(__dirname, '..', 'src', 'index.tsx'),
 resolve: {
   extensions: ['.tsx', '.ts', '.js'],
 },
 output: {
   filename: '[name].[contenthash].js',
   path: path.resolve(__dirname, '..', 'build'),
 },
 devServer: {
   host: 'localhost',
   port: 3000,
   inline: true,
   open: true,
   clientLogLevel: 'debug'
 },
 plugins: [
   new HtmlWebpackPlugin({
     inject: true,
     template: './public/index.html',
   }),
   new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
     PUBLIC_URL: './public',
   }),
   new Dotenv({
     safe: true,
     allowEmptyValues: true,
     systemvars: true,
     silent: true,
     defaults: false,
   }),
   new CopyWebpackPlugin({
     patterns: [
       {
         from: 'public',
         globOptions: {
           ignore: ['**/index.html'],
         },
       },
     ],
   }),
   new ESLintPlugin({
     extensions: ['.tsx', '.ts', '.js'],
     formatter: 'prettier',
   }),
 ],
 optimization: {
   moduleIds: 'deterministic',
   runtimeChunk: 'single',
   splitChunks: {
     cacheGroups: {
       vendor: {
         test: /[\\/]node_modules[\\/]/,
         name: 'vendors',
         chunks: 'all',
       },
     },
   },
 },
 module: {
   rules: [
     {
       test: /\.tsx?$/,
       use: 'awesome-typescript-loader',
       exclude: /node_modules/,
     },
     {
       test: /\.s[ac]ss$/i,
       use: ['style-loader', 'css-loader', 'sass-loader'],
     },
     {
       test: /\.css$/i,
       use: ['style-loader', 'css-loader'],
     },
     {
       test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
       use: [
         {
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: 'fonts/',
           },
         },
       ],
     },
   ],
 },
}

странно, скрипты инлайниш, а шрифты нет.

Окей, поправлю, у меня еще проблема, при сохранении webpack компилирует, но страницу в браузере не обновляет, не знаешь почему так может быть?

Весь интернет перелопатил уже, второй день пытаюсь запустить

указал в настройках дев. сервера contentBase и watchContentBase:true?

да, ноль эффекта :(

Господа, а кто-нибудь делал анимацию движения элемента по синусоедному графику?

Самое интересное, что с этим же конфигом все работало на винде под всл - перешел на линукс, сломалось :(

да. а при чём тут вебпак?

хмм, странно. я по этому гайду настраивал:  https://link.medium.com/otbA1RBFEbb

Да, тоже пробовал, не помогает

а мне помогло просто добавить таргет, но возможно это другое

Таргет в поле devServer?

Понял, мне это не помогло :(

А нет, слушай, перепроверил - заработало!
Где же ты раньше был?))

где то тут, кстати это решение с таргетом тоже в этом чате нашел через поиск

Понял, спасибо тебе большое в любом случае)

отправь плс скриншот, у меня такая же проблема, не релодиться дев сервер

Вот, добавь так просто