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'。这些属性是有效的：对象{exprContextCritical？exprContextRecursive？exprContextRegExp？exprContextRequest？装载机？noParse？规则？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

npm uninstall webpack --save-dev

接着是

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

Answer 4

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

},

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

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

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

6 个答案: