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

【问题标题】：Webpack config has an unknown property 'preLoaders'Webpack 配置具有未知属性“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)。

【问题讨论】：

标签： webpack config lint preloader

【解决方案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：检查此stackoverflow.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】：

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

【讨论】：