webpack 4.1.1 ->configuration.module 有一个未知的属性“loaders". [英] webpack 4.1.1 -> configuration.module has an unknown property 'loaders'.

问题描述

我刚刚将 webpack 更新为 4.1.1，当我尝试运行它时，出现以下错误:

I just updated webpack to 4.1.1 and when I try to run it I get the following error:

无效的配置对象.Webpack 已使用与 API 架构不匹配的配置对象.- configuration.module 有一个未知的属性 'loaders'.这些属性是有效的: object { exprContextCritical?,exprContextRecursive?, exprContextRegExp?, exprContextRequest?,noParse?, rules?, defaultRules?, unknownContextCritical?,unknownContextRecursive?, unknownContextRegExp?,unknownContextRequest?、unsafeCache?、wrappedContextCritical?、wrapperContextRecursive?、wrappedContextRegExp?、strictExportPresence?，strictThisContextOnImports?} -> 选项影响正常模块(NormalModuleFactory).

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (NormalModuleFactory).

loaders 看起来像这样并且与 webpack 3.11.0 一起工作:

loaders look like this and worked with webpack 3.11.0:

module: {
    loaders: [
        { test: /\.tsx?$/, loader: ['ts-loader'] },
        { test: /\.css$/, loader: "style-loader!css-loader" },
        {
            test: /\.scss$/, use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        },
        { test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
    ]
}

推荐答案

看了一个 webpack 4.1.1 的示例加载器:

Looked at an example loader for webpack 4.1.1:

https://webpack.js.org/loaders/raw-loader/

我所要做的就是将 loaders 重命名为 rules.

All I had to do was rename loaders to rules.

module: {
    rules: [
        { test: /\.tsx?$/, loader: ['ts-loader'] },
        { test: /\.css$/, loader: "style-loader!css-loader" },
        {
            test: /\.scss$/, use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        },
        { test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
    ]
}

这篇关于webpack 4.1.1 ->configuration.module 有一个未知的属性“loaders".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！