MiniCSSExtractPlugin 不会从definePlugin 条目中提取样式

问题描述

我想将我的 scss 样式分成块。因此，我创建了一个由 subpage.js 文件（条目之一）导入的单独 subpage.scss。我使用 miniCssExtractPlugin 从 JS 中提取 SCSS 样式并为每个文件创建样式包。我将它们在 BundleConfig 中映射到 HTML 中引用的特定样式块。 整个过程适用于 main.js 和 main.scss 但不适用于 subpage.js 和 subpage.scss - 它在 .js 文件中保留样式并且样式加载两次（来自 JS 和来自 HTML）。这些情况之间的唯一区别是 main.js 作为 webpack.config.js 中的条目加载，而 subpage.js 与 webpack.DefinePlugin() 中的其余条目一起加载。

知道为什么 MiniCssExtractPlugin 不从使用此方法加载的 .js 文件中提取样式并正确提取主条目的样式吗？

我的 webpack.config.js

const readEntries = require('./entries');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const entries = readEntries('../Scripts/entries');

module.exports = (mode) => ({

name: 'name',context: path.resolve(__dirname,'../Scripts'),resolve: {
    extensions: ['.js','.json','.html','.vue'],alias: {
        '~': path.resolve(__dirname,'vue$': 'vue/dist/vue.esm.js','@trackers': path.resolve(__dirname,'../Scripts/trackers')
    },},entry: {
    main: './main.js',output: {
    path: path.resolve(__dirname,'../Content/bundle'),publicPath: '/Content/bundle/',filename: '[name].bundle.js',chunkFilename: process.env.NODE_ENV === 'production' ? '[id].js?v=[contenthash]' : '[name].js?v=[contenthash]'
},plugins: [
    new CleanWebpackPlugin(),new webpack.ProgressPlugin(),new webpack.DefinePlugin({
        'process.env': {
            'ENTRIES': JSON.stringify(entries),'NODE_ENV': JSON.stringify(mode)
        }
    }),new VueLoaderPlugin(),new MiniCssExtractPlugin({
        filename: '[contenthash].[name].bundle.css',}),new BundleAnalyzerPlugin({
        openAnalyzer: false,analyzerMode: 'static'
    })
],module: {
    rules: [
        {
            test: require.resolve('vue'),use: [
                {
                    loader: `expose-loader`,options: 'Vue'
                }
            ]
        },{
            test: /\.vue$/,loader: 'vue-loader'
        },{
            test: /\.(js)$/,use: [
                'babel-loader'
            ],exclude: /node_modules/
        },{
            test: /\.(png|jpg|gif|svg)$/,loader: 'file-loader',options: {
                name: '[name].[ext]?[contenthash]'
            }
        },{
            test: /\.(sa|sc|c)ss$/,use: [
                {
                    loader: MiniCssExtractPlugin.loader
                },'css-loader','postcss-loader','sass-loader'
            ]
        }
    ]
},optimization: {
    splitChunks: {
        chunks: 'async'
    }
},performance: {
    hints: false
},externals: {
    jquery: 'jQuery',DM: 'DM'
},stats: {
    modules: false
},target: 'web'
});

我的 BundleConfig：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.IgnoreList.Clear();
        BundleTable.EnableOptimizations = true;

        bundles.Add(new ScriptBundle("~/bundles/js/head").Include(
            "~/Scripts/head.js"
        ));

        bundles.Add(new Bundle("~/bundles/js/scripts").Include(
            "~/Content/bundle/main.bundle.js"
        ));

        bundles.Add(new StyleBundle("~/bundles/css/main").Include(
            "~/Content/bundle/*main.bundle.css"
        ));

        bundles.Add(new StyleBundle("~/bundles/css/trends").Include(
            "~/Content/bundle/*trends.bundle.css"
        ));
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）