Webpack 不会将 CSS 输出到烧瓶文件夹中，最终为空答案

【问题标题】：Webpack does not output CSS into flask folder, ends up emptyWebpack 不会将 CSS 输出到烧瓶文件夹中，最终为空
【发布时间】：2020-08-03 06:04:03
【问题描述】：

我为两个文件设置了一个非常简单的 webpack。这是基于video。

这是我的 webpack 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的内容取自here，这是前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; }

我的 webpack 输出是：

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>文件夹（红笔覆盖）。 webpack是要把<project-web>里面的Js和Css文件打包，放到flaskr下的static文件夹下，但是好像把JS文件捡起来了，因为在DevTool的source选项卡里我看到了内容对于static/js/index.js，但static/css/index.css 文件为空。

如何将内容放入该文件？

【问题讨论】：

看起来在 js 文件夹中创建的主文件夹是 webpack 试图放置 css 文件的地方。我不知道为什么（与path.resolve...有关

标签： javascript css node.js flask webpack

【解决方案1】：

配置想要改变这个：

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

到

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

path.resolve 表示将文件名更改为相对于输出路径的绝对路径，这意味着它将 css 文件的整个路径添加到输出路径的末尾。

【讨论】：