Webpack не выводит CSS в папку flask, в итоге он пустой

Question

У меня очень простой веб-пакет, настроенный на два файла. Это основано на этом видео .

Вот мой веб-пакет config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: './src/js/index.js',
    mode: 'development',
    output: {
        filename: 'index.js',
        path: path.resolve('../flaskr/static/js')
    },
    module: {
        rules: [
            {
                test: /\.(css)/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: path.resolve('../css/index.css')
        })
    ]
}

Содержимое моего index.js

import '../css/index.css'

Содержимое моего index.css взято из здесь , это первые 4 строки:

html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }

Мой вывод из веб-пакета:

npx webpack --config config.js 
Hash: 46ffcd1c2d4f9d03c14c
Version: webpack 4.42.1
Time: 2967ms
Built at: 04/20/2020 4:36:01 PM
                         Asset      Size  Chunks             Chunk Names
/home/castone/go/css/index.css  1.44 KiB    main  [emitted]  main
                      index.js  4.49 KiB    main  [emitted]  main
Entrypoint main = /home/castone/go/css/index.css index.js
[./src/css/index.css] 39 bytes {main} [built]
[./src/js/index.js] 25 bytes {main} [built]
    + 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!src/css/index.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./src/css/index.css] 1.69 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

Вот скриншот моего макета папки:

Короче говоря, есть папка flaskr и папка <project-web> (покрыта красной ручкой) на том же уровне. Веб-пакет собирается упаковать файлы Js и Css в <project-web> и поместить их в папку stati c в папке flaskr, но, похоже, подхватывает файл JS, потому что в На вкладке исходного кода DevTool я вижу содержимое для static/js/index.js, но файл static/css/index.css пуст.

Как мне загрузить содержимое в этот файл?

Answer 1

Конфиг хочет изменить это:

plugins: [
        new MiniCssExtractPlugin({
            filename: path.resolve('../css/index.css')
        })
    ]

на

plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/index.css'
        })
    ]

path.resolve говорит об изменении имени файла на абсолютный путь, который относительно вывода путь означает, что он добавляет весь путь к файлу css в конец пути вывода.