webpack sass в css файлы в Производстве с мини-css-extract-плагином

Question

Новое в вебпаке и узле.Я пытаюсь выяснить, как получить огромные файлы SCSS в файлы CSS для производства, а затем связать их с выходными файлами.Сидеть здесь часами и в режиме разработки все нормально.Когда я запускаю свой скрипт сборки, тогда CSS-файлы прекрасно сочетаются с хэшами в именах файлов.Но в производстве нет никакого отношения к моим HTML-файлам.(В dev он отлично работает).

Вот мой webpack.config.js

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

module.exports = (env, argv) => {  
    const devMode = argv.mode !== 'production' 
    return {
        entry: {
            index: ['@babel/polyfill', './src/scripts/index.js'],
            edit: ['@babel/polyfill', './src/scripts/edit.js'],
        },
        output: {
            path: path.resolve(__dirname, 'public/scripts'),
            filename: '[name]-bundle.js'
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {loader:  'css-loader', options: {importLoaders: 2} },
                    'resolve-url-loader',
                    'sass-loader',
                  ],
            }
            ]
        },
         devServer: {
            contentBase: path.resolve(__dirname, 'public'),
            publicPath: '/scripts/'
        },
            devtool: 'source-map',
        plugins: [
            new MiniCssExtractPlugin({
                    filename: devMode ? '../styles/[name].css' : '../styles/[name].[hash].css',
                    chunkFilename: devMode ? '../styles/[id].css' : '../styles/[id].[hash].css',
            })
        ]
    }
}

В моих файлах page-js я импортирую свой SCSS

import '../styles/styles.scss'

, который, кажется, не действует впроизводство, но отлично работает в dev.

После нескольких часов исследований моя единственная идея - вручную установить тег ссылки в файлах HTML ...

Я очень новичок в веб-пакете, поэтомукаждая помощь высоко ценится.Большое спасибо заранее.