Webpack配置有一个未知属性'preLoaders'

Posted 2023-02-01

我正在从头开始学习webpack。我已经学会了如何将javascript文件与require链接起来。我正在捆绑和缩小我的js文件，我正在监听手表的变化。我正在设置加载器将我的sass文件转换为css。但是当我尝试使用jshint-loader设置linting过程时，我遇到了问题。

    module: 
preLoaders: [
        
            test: /\.js$/, // include .js files
            exclude: /node_modules/, // exclude any and all files in the node_modules folder
            loader: "jshint-loader"
        
],

loaders: [
  
    test: /\.scss$/,
    loader: 'style-loader!css-loader!sass-loader'
  ,
  
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules$/,
    query: 
      presets: ['es2015']
    
  
],

这是错误

配置对象无效。 Webpack已使用与API架构不匹配的配置对象进行初始化。 - configuration.module有一个未知属性'preLoaders'。这些属性是有效的：object exprContextCritical？，exprContextRecursive？，exprContextRegExp？，exprContextRequest？，loaders？，noParse ?, rules ?, unknownContextCritical？，unknownContextRecursive？，unknownContextRegExp？，unknownContextRequest？，unsafeCache？，wrappedContextCritical？，wrappedContextRecursive？，wrappedContextRegExp ？影响正常模块的选项（NormalModuleFactory）。

答案

您显然正在尝试使用webpack v1和webpack v2的示例。直接从changelog：

  module: 
-   preLoaders: [
+   rules: [
      
        test: /\.js$/,
+       enforce: "pre",
        loader: "eslint-loader"
      
    ]
  

另一答案

从v2.1-beta.23开始，加载器部分被重命名为规则，现在在每个规则下使用enforce属性定义pre / postLoaders。

所以只需将preLoaders重命名为rules，你应该好好去;-)

另一答案

如果您正在使用webpack 2，那么您可以在加载器数组中使用enforce：'pre'标签，这将作为预加载，请参阅下面的代码了解详细信息

module: 
    loaders: [
        
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint-loader',
            //this is similar to defining a preloader
            enforce: 'pre'
        ,
        
            test: /\.es6$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        
    ]

,

另一答案

首先卸载webpack

npm uninstall webpack --save-dev

其次是

npm install webpack@2.1.0-beta.22 --save-dev

另一答案

请使用此代码./webpack.config.js

 var path = require('path');

module.exports = 
   entry: './main.ts',
   resolve: 
     extensions: ['.webpack.js', '.web.js', '.ts', '.js']
   ,
   module: 
     rules: [
      
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      
    ]
   ,
   output: 
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   
 

可以找到文档here问题与您安装的ts-loader版本有关

另一答案

对我来说，只需将“装载机”改为“规则”即可。