Webpack 配置具有未知属性“preLoaders”

Posted 2023-02-22

【中文标题】Webpack 配置具有未知属性“preLoaders”

【英文标题】：Webpack config has an unknown property 'preLoaders'

【发布时间】：2017-07-17 12:02:31

【问题描述】：

我正在从头开始学习 webpack。我已经学会了如何将 javascript 文件与 require 链接起来。我正在捆绑和缩小我的 js 文件，我正在用 watch 监听变化。我正在设置加载程序以将我的 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)。

【参考方案1】：

您显然正在尝试将 webpack v1 的示例与 webpack v2 一起使用。直接来自changelog：

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

【讨论】：

module: preLoaders:[ test:/\.js$/, exclude:'node_modules', loader:'jshint-loader', ], rules: [ test: /\. es6$/, exclude: [/node_modules/], loader: "babel-loader", ] 仍然出现错误配置。模块有一个未知属性 'preLoaders'。请给出完整的语法

@Aji - 和 + 就像在差异中一样：要删除的内容是减号，要添加到代码中的内容是加号。因此，我的示例最终将包含除 preLoaders 之外的所有行

【参考方案2】：

从 v2.1-beta.23 开始，loaders 部分被重命名为 rules，并且 pre/postLoaders 现在在每条规则下定义为带有 enforce 属性。

所以只需将 preLoaders 重命名为 rules 就可以了 ;-)

【讨论】：

我的属性“loaders”有错误。我搜索了很多，但找不到任何东西。然后你的回答就像一个魅力。我只是将“加载程序”更改为“规则”。

@Akshay 您的解决方案是正确的，因为版本高于 4.1.1：检查此***.com/questions/49203841/…

【参考方案3】：

如果您使用的是 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"
        
    ]

,

【参考方案4】：

先卸载webpack

npm uninstall webpack --save-dev

紧随其后

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

【参考方案5】：

改用这个 ./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版本有关

【参考方案6】：

对我来说，只需将“加载程序”更改为“规则”即可。