mini-css-extract-plugin语法错误-将Webpack v1.9。*升级到v4.41。*

webpack.config.vendor.js和webpack.config.js中确实令人沮丧的语法错误:

C:\project>node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].module.rules[2].use should be one of these:
   non-empty string | function | object { ident?,loader?,options?,query? } | function | [non-empty string | function | object { ident?,query? }]
   -> Modifiers applied to the module when rule is matched
   Details:
    * configuration[0].module.rules[1].use.loader should be a string.
    * configuration[0].module.rules[1].use.loader should be one of these:
      non-empty string
      -> Loader name
    * configuration[0].module.rules[2].use.loader should be a string.
    * configuration[0].module.rules[2].use.loader should be one of these:
      non-empty string
      -> Loader name

我遍历了网上示例的语法,我看不到规则的配置如何不遵循API架构,任何人都可以看到??

webpack.config.js

...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
module.exports = (env) => {
        ...   
        module: {
            rules: [
                {
                    test: /\.css(\?|$)/,use: {
                        loader: [ MiniCssExtractPlugin.loader,isDevBuild ? 'css-loader' : 'css-loader?minimize'],options: {
                            publicPath: './'
                        }
                    },include: [path.resolve(__dirname,'./ClientApp/content')] 
                },{
                    test: /\.scss(\?|$)/,use: {
                        loader: [isDevBuild ? 'css-loader' : 'css-loader?minimize',MiniCssExtractPlugin.loader,'sass-loader'],options: {
                                publicPath: './'
                            }
                    },'./ClientApp/content')]
                },{
                    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/,use: {
                        loader: 'url-loader?limit=25000'
                    }
                }
            ]
        },...
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig,{
        entry: {
        ...
        },output: {
        ....
        },plugins: [
            new MiniCssExtractPlugin(
                {
                    filename: "[name].css",chunkFilename: "[id].css"
                }
            ),

webpack.config.vendor.js

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

const treeShakableModules = [
    ...
];

const nonTreeShakableModules = [
 ...
];

const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        ....
        module: {
            rules: [
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/,use: {
                        loader: 'url-loader?limit=100000'
                    }
                }
            ]
        },output: {
            publicPath: 'dist/',filename: '[name].js',library: '[name]_[hash]'
        },plugins: [
            new webpack.ProvidePlugin({ $: 'jquery',jQuery: 'jquery','Popper': 'popper.js/dist/umd/popper' }),new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/,path.join(__dirname,'./ClientApp')),new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,new webpack.IgnorePlugin(/^vertx$/) 
        ]
    };

    const clientBundleConfig = merge(sharedConfig,{
        entry: {
            vendor: isDevBuild ? allModules : nonTreeShakableModules
        },output: { path: path.join(__dirname,'wwwroot','dist') },module: {
            rules: [
                {
                    test: /\.css(\?|$)/,use: {
                        loader: [MiniCssExtractPlugin.loader,isDevBuild ? 'css-loader' : 'css-loader?minimize'] 
                    }
                },'sass-loader'] 
                    }
                }
            ]
        },plugins: [
            new MiniCssExtractPlugin ({
                    filename: "[name].css",chunkFilename: "[id].css"
                }),

此升级始于使用旧的“ extract-text-webpack-plugin”的ASP.NET Core 2.1 Angular v5.1 webpack v1.9,现在已升级为mini-css-extract-plugin。该语法看似合适。加载程序被提供给API模式的方式有点麻烦,但我很茫然。

zhang_ding345 回答:mini-css-extract-plugin语法错误-将Webpack v1.9。*升级到v4.41。*

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3091097.html

大家都在问