Webpack（带有插件）是否可以缩小我的CSS文件，将其放在我的dist文件夹中，并向index.html添加标记

我希望最终得到一个CSS文件，它是我的开发环境标准CSS文件的合并和缩小版本。使用基于文件内容的哈希名称，该文件将自动添加为分发文件夹中生成的index.html文件中的标记

这可能吗？我想这是因为我已经让Webpack4做了我需要它做的所有事情。如果是，我会怎么做

请注意，它必须这样设置。我不允许在我的JS中使用导入语句或类似的语句

我尝试过使用Mini Css Extract插件和优化Css资产网页包插件，看看他们是否可以做我想做的事情，但我可能做错了，因为我从来没有得到任何输出文件（我知道它不会给我一个修改过的index.html，但拥有Css文件至少是一个开始）

我当前的文件结构基本上是：

---

“mainFolder”/public/css最后，当我的主管意识到import语句在编译过程中被剥离时，他们允许这样做。所以我们用这条路线去实现我们想要的。贝娄是我们最终的选择

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = { 
    entry: [
        './public/js/app.js',
        './public/js/filters/weekday.js',
        './public/js/filters/dial-in.js',
        './public/js/filters/time.js',
        './public/js/filters/group-member.js',
        './public/js/filters/bool-to-icon.js',
        './public/js/filters/date-format.js',
        './public/js/filters/time-format.js',
        './public/js/services/main.js',
        './public/js/configs/config.js',
        './public/js/controllers/main.js',
        './public/js/pages/calendar/controller.js',
        './public/js/pages/company/view/controller.js',
        './public/js/pages/company/edit/controller.js',
        './public/js/pages/group-meeting/create/controller.js',
        './public/js/pages/group-meeting/detail/controller.js',
        './public/js/pages/group-meeting/view/controller.js',
        './public/js/pages/group-meeting-calendar/controller.js',
        './public/js/pages/login/controller.js',
        './public/js/pages/meeting-link/view/controller.js',
        './public/js/pages/meeting-link/edit/controller.js',
        './public/js/pages/meeting-link/detail/controller.js',
        './public/js/pages/user/view/controller.js',
        './public/js/pages/user/edit/controller.js',
        './public/js/lib/angular-semantic-ui.min.js'
    ],
    output: {
        filename: 'js/app.[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    devtool: 'source-map ',
    plugins: [
        new CleanWebpackPlugin(['dist'], {

        }), 
        new HtmlWebpackPlugin({
            title: 'Zenvite',
            template: './public/templates/index.html',
            filename: 'templates/index.html'
        }),
        new CopyWebpackPlugin([
            //{ from: 'public/css', to:'css'},
            { from: 'public/media', to:'media'},
            { from: 'public/js/pages', to: 'js/pages', ignore: [ '*.js' ]},
            { from: 'public/templates/app.html', to: 'templates'}
        ]),
        new MiniCssExtractPlugin({
            filename: 'css/app.[contenthash].css'
        })
    ],
    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
            ],
        }]
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                cache: true,
                parallel: true,
                sourceMap: true, // Must be set to true if using source-maps in production
        }),

            new OptimizeCSSAssetsPlugin({})
        ]
   }
};

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = { 
    entry: [
        './public/js/app.js',
        './public/js/filters/weekday.js',
        './public/js/filters/dial-in.js',
        './public/js/filters/time.js',
        './public/js/filters/group-member.js',
        './public/js/filters/bool-to-icon.js',
        './public/js/filters/date-format.js',
        './public/js/filters/time-format.js',
        './public/js/services/main.js',
        './public/js/configs/config.js',
        './public/js/controllers/main.js',
        './public/js/pages/calendar/controller.js',
        './public/js/pages/company/view/controller.js',
        './public/js/pages/company/edit/controller.js',
        './public/js/pages/group-meeting/create/controller.js',
        './public/js/pages/group-meeting/detail/controller.js',
        './public/js/pages/group-meeting/view/controller.js',
        './public/js/pages/group-meeting-calendar/controller.js',
        './public/js/pages/login/controller.js',
        './public/js/pages/meeting-link/view/controller.js',
        './public/js/pages/meeting-link/edit/controller.js',
        './public/js/pages/meeting-link/detail/controller.js',
        './public/js/pages/user/view/controller.js',
        './public/js/pages/user/edit/controller.js',
        './public/js/lib/angular-semantic-ui.min.js'
    ],
    output: {
        filename: 'js/app.[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    devtool: 'source-map ',
    plugins: [
        new CleanWebpackPlugin(['dist'], {

        }), 
        new HtmlWebpackPlugin({
            title: 'Zenvite',
            template: './public/templates/index.html',
            filename: 'templates/index.html'
        }),
        new CopyWebpackPlugin([
            //{ from: 'public/css', to:'css'},
            { from: 'public/media', to:'media'},
            { from: 'public/js/pages', to: 'js/pages', ignore: [ '*.js' ]},
            { from: 'public/templates/app.html', to: 'templates'}
        ]),
        new MiniCssExtractPlugin({
            filename: 'css/app.[contenthash].css'
        })
    ],
    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
            ],
        }]
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                cache: true,
                parallel: true,
                sourceMap: true, // Must be set to true if using source-maps in production
        }),

            new OptimizeCSSAssetsPlugin({})
        ]
   }
};