webpack 4.1.1 -> configuration.module 有一个未知的属性 'loaders'。

Posted 2023-02-22

【中文标题】webpack 4.1.1 -> configuration.module 有一个未知的属性 \'loaders\'。

【英文标题】：webpack 4.1.1 -> configuration.module has an unknown property 'loaders'.webpack 4.1.1 -> configuration.module 有一个未知的属性 'loaders'。

【发布时间】：2018-08-18 14:53:17

【问题描述】：

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

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

loaders 看起来像这样并与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]' 
    ]

【参考方案1】：

查看了 webpack 4.1.1 的示例加载器：

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

我所要做的就是将 loaders 重命名为 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]' 
    ]