Webpack 迷你css提取插件不适用于网页包开发服务器

当我运行

npm-run-dev

mini-css-extract-plugin捆绑时，但当我运行

npm-run-server

mini-css-extract-plugin-not捆绑时

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',

    entry: {
        app: './resources/index.js'
    },

    output: {
        path: path.resolve(__dirname, 'app/assets/js'),
        publicPath: '/assets/js',
      filename: 'app.js'
    },

    devServer: {
        contentBase: path.join(__dirname, 'app'),
        port: 9000,
    },

   module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')
                            ],
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                js: {
                    test: /\.js$/,
                    name: "commons",
                    chunks: "all",
                    minChunks: 7,
                },
                css: {
                    test: /\.(css|sass|scss)$/,
                    name: "commons",
                    chunks: "all",
                    minChunks: 2,
                }
            }
        }
    },

    plugins: [
        new MiniCssExtractPlugin({filename: "../css/[name].css"}),
        new VueLoaderPlugin()
    ],

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    }
};

及

webpack dev server检测到js文件中的更改并重新加载页面，js功能正常，但当scss文件更改时，webpack dev server也检测到了这一点，但没有绑定

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',

    entry: {
        app: './resources/index.js'
    },

    output: {
        path: path.resolve(__dirname, 'app/assets/js'),
        publicPath: '/assets/js',
      filename: 'app.js'
    },

    devServer: {
        contentBase: path.join(__dirname, 'app'),
        port: 9000,
    },

   module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')
                            ],
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                js: {
                    test: /\.js$/,
                    name: "commons",
                    chunks: "all",
                    minChunks: 7,
                },
                css: {
                    test: /\.(css|sass|scss)$/,
                    name: "commons",
                    chunks: "all",
                    minChunks: 2,
                }
            }
        }
    },

    plugins: [
        new MiniCssExtractPlugin({filename: "../css/[name].css"}),
        new VueLoaderPlugin()
    ],

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    }
};

我想知道问题出在哪里？

这是我的webpack.config.js 您可以尝试删除其他css加载程序（sass POSTSS），制作一个mvd（最小可行演示），然后尝试

希望对你有帮助

const path=require（'path'））
const webpack=require（'webpack'）
const HtmlWebpackPlugin=require（'html-webpack-plugin'）
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const{CleanWebpackPlugin}=require（'clean-webpack-plugin'）
const isDevelopment=process.env.NODE\u env！='生产",；
module.exports={
//如有必要，请更改为.tsx
条目：{
应用程序：'./src/app.tsx'
},
输出：{
文件名：'[name].[contenthash].js'
},
决心：{
别名：{
assets:path.resolve（_dirname，“../src/assets/”），
},
扩展名：[“.ts”、“.tsx”、“.js”、“.jsx”]
},
模块：{
规则：[
{
测试：/\.css$/,，
使用：[
isDevelopment？“样式加载器”：{
加载器：MiniCssExtractPlugin.loader，
选项：{
//您可以在此处指定公共路径
//默认情况下，它在webpackOptions.output中使用publicPath
公共路径：“../”，
hmr：ISD开发，
},
},
{
加载器：“css加载器”，
选项：{
模块：正确
}
}
]
},
{
// 图片格式正则
测试：/\（png | jpe？g | gif | svg）（\？*）$/，
使用：[
{
加载器：“url加载器”，
// 配置 url加载器的可选项
选项：{
// 限制 图片大小 9KB小于限制会将图片转换为 base64格式
限额：10000，
// 超出限制，创建的文件格式
//构建/图像/[图片名].[散列][图片格式]
名称：'images/[name].[hash].[ext]'
}
}
]
},
//从{test://\.jsx？$/，更改为：{loader:'babel loader'}，exclude:/node\u modules/}，
{test://\（t|j）sx？$/，使用：{loader:'ts loader'}，exclude:/node\u modules/}，
//添加-添加源映射支持
{强制执行：“pre”，测试：/\.js$/，排除：/node\u modules/，加载程序：“源映射加载程序”}
]
},
插件：[
新的CleanWebPackagePlugin（），
新HtmlWebpackPlugin({
模板：'./src/index.html'
}),
新的MinicsSextract插件({
文件名：'[name].[contenthash].css'，
chunkFilename:'[id].[contenthash].css'，
}),    
新的webpack.EnvironmentPlugin({
NODE_ENV:'development'，//除非定义了process.ENV.NODE_ENV，否则使用'development'
调试：false
})    
],
优化：{
分割块：{
缓存组：{
供应商：{
测试：/[\/]节点单元模块[\\/]/,，
名称：'供应商'，
块：“全部”，
},
},
},
}
}

这里有类似的问题我有类似的设置。地雷也不起作用。Hello@bhaltair，你能解释一下你的网页配置中哪里有有用的信息以及它是如何帮助的吗？在生产模式下使用MiniCssExtractPlugin