Webpack配置存在未知属性'preLoaders'。

Question

我正在从头学习webpack。 我已经学会了如何使用require链接javascript文件。 我正在打包和缩小我的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模式的配置对象。 - 配置项module有一个未知属性 'preLoaders'。这些属性是有效的： object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } 影响普通模块（NormalModuleFactory）的选项。

- bakerTX

Answer 1

你似乎在尝试使用webpack v1的示例来使用webpack v2。直接从changelog可以看出：

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

- Ivan

---

模块: { 预加载器:[{ 测试:/.js$/, 排除:'node_modules', 装载机:'jshint-loader', }], 规则: [ { 测试: /.es6$/, 排除: [/node_modules/], 装载机: "babel-loader", } ] 仍然出现错误 配置.module具有未知属性'preLoaders'。 请提供完整的语法。 - Aji

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

Answer 2

从v2.1-beta.23版本开始，loader部分被重命名为rules，并且pre/postLoaders属性现在在每个rule下进行定义，使用enforce属性。

因此，只需将preLoaders重命名为rules即可。

- dotnet-provoke

---

我遇到了关于“loaders”属性的错误。我搜索了很多但是找不到任何解决方法。然后你的答案起了神奇的作用。我只是将“loaders”改为“rules”。 - Akshay Pethani

@Akshay，你的解决方案是正确的，因为在4.1.1以上的版本中已经修复了这个问题：请参考https://dev59.com/vVUM5IYBdhLWcg3wMN19?rq=1 - another

Answer 3

首先卸载webpack：

npm uninstall webpack --save-dev

然后执行：

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

- Wasim Malik

Answer 4

使用这个代替 ./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')
   }
 }

文档可以在这里找到，问题与您安装的ts-loader版本有关。

- Greko2015 GuFn

Answer 5

如果您正在使用Webpack 2，则可以在loaders数组中使用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"
        }
    ]

},

- prasanth shenoy

Answer 6

对我来说，只需将“loaders”更改为“rules”即可使其正常工作。

- Khushboo Gupta