javascript - 使用 mini-css-extract-plugin 将 webpack sass 转换为生产环境中的 css 文件

Question

webpack 和节点的新手。我试图弄清楚，如何将巨大的 SCSS 文件转换为用于生产的 CSS 文件，然后将它们链接到输出文件。坐在这里几个小时，在开发模式下一切都很好。当我运行构建脚本时，CSS 文件在文件名中使用哈希构建得非常好。但在生产中，与我的 HTML 文件无关。（在开发中效果很好）。

这是我的 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'

这似乎对生产没有影响，但在开发中运行良好。

经过数小时的研究，我唯一的想法是在 HTML 文件中手动设置链接标签......

我对 webpack 很陌生，所以每一个帮助都非常感谢。提前谢谢了。

标签： javascriptcsswebpacksasswebpack-4