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

Question

我正在从头开始学习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）。

Answer 1

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

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

Answer 2

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

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

Answer 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"
        }
    ]

},

Answer 4

首先卸载webpack

npm uninstall webpack --save-dev

其次是

npm install [email protected] --save-dev

Answer 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版本有关

Answer 6

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