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]' }
    ]
}

【问题讨论】：

标签： javascript typescript webpack

【解决方案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]' }
    ]
}

【讨论】：