Как поправить ошибку webpack-dev-server Content not from webpack is served from?

Question

[sergeyviktorovich]

в папке паблик лежит проект и фаил index,.html

<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.43.251:9000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\keep\public' directory

фаил webpack

const path = require('path');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const extractCSS = new MiniCssExtractPlugin();




module.exports = {
    entry: "./src/index.js", // основной файл приложения
    output: {
        path: __dirname + '/public/',
        filename: "bundle.js"
        // path: __dirname + "/public/build", // путь к каталогу выходных файлов
        //filename: "bundle.js",  // название создаваемого файла 

    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.jsx?$/, // какие файлы обрабатывать
                exclude: [/node_modules/, /public/], // какие файлы пропускать
                use: { loader: "babel-loader" }
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]

            }
        ]
    },
    plugins: [
        extractCSS,
        new HtmlWebpackPlugin({
            template: __dirname + '/index.html', //your template file
            filename: 'index.html',

        })


    ],
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 9000,
    },
}

Comments

[GlazOtca]

По идее должно работать. Возможно структура папок не совсем подходит? Надо бы скрин. Где лежит сам конфиг?

[sergeyviktorovich]

GlazOtca, скрин добавил
еще после изменения путей
вот на такие , 192.168.43.251:8080/chapter/zametki-rabota
вылезла ошибка,
moi-zametki:1 Refused to apply style from '192.168.43.251:9000/chapter/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

что ищет main.css' в папке chapter, а не в корне ,

css добавляет и формирует index.html

new HtmlWebpackPlugin({
            template: __dirname + '/index.html', //your template file
            filename: 'index.html',

        })

[GlazOtca]

sergeyviktorovich, сделал проект как у вас - очень много ошибок! Во-первых, никогда не делайте так:

template: __dirname + '/index.html', //your template file

Вы для чего path рекварили? Вот его и используйте, иначе все пути будут неправильными.
template: path.resolve(__dirname, './index.html'),
Во-вторых, не забывайте точку перед слешем (без точки ищет файлы в корне C/index.html)
В-третьих, сервер отказывается запускаться на 9000порту, на 8080 работает нормально.

[sergeyviktorovich]

GlazOtca, все равно ругается сервер на эти ошибки
при сборке dev
[webpack-dev-server] Content not from webpack is served from 'C:\Users\Anriko\Desktop\домашка реакт\FD3-Pauls\keep\public' directory
[webpack-dev-server] 404s will fallback to '/index.html

и хочет все равно искать в поддеректориях файлы стилей,хотя они в корне ,и не открывается страницы если,их url обновить

zametki-rabota:12 GET 192.168.43.251:8080/chapter/bundle.js net::ERR_ABORTED 404 (Not Found)
zametki-rabota:1 Refused to apply style from '192.168.43.251:8080/chapter/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
zametki-rabota:1 Unchecked runtime.lastError: The message port closed before a response was received.
zametki-rabota:1 Unchecked runtime.lastError: The message port closed before a response was received.