web-dev-qa-db-ja.com

webpack 4.1.1-> configuration.moduleには不明なプロパティ「loaders」があります。

Webpackを4.1.1に更新したところ、実行しようとすると次のエラーが表示されます。

無効な構成オブジェクト。 Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されています。 -configuration.moduleに不明なプロパティ「ローダー」があります。これらのプロパティは有効です：object {exprContextCritical？、exprContextRecursive？、exprContextRegExp？、exprContextRequest？、noParse？、rules？、defaultRules？、unknownContextCritical？、unknownContextRecursive？、unknownContextRegExp？、unknownContextRequest？、unsafeCache？、wrappedContextCritical？、wrappedContextRecursive？、wrappedContextRecursive？ ？、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]' }
    ]
}
javascripttypescriptwebpack
20
Ogglas

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