minicssextractplugin - Webpack config tiene una propiedad desconocida ''preLoaders''

webpack config css loader

Question

Estoy aprendiendo webpack desde cero. He aprendido cómo vincular archivos javascript con require. Estoy agrupando y minimizando mis archivos js y estoy escuchando los cambios con el reloj. Estoy configurando cargadores para convertir mis archivos sass a css. Pero cuando trato de configurar un proceso de alineación con jshint-loader, estoy teniendo problemas.

    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'']
    }
  }
],

}

Aquí está el error

Objeto de configuración no válido. El paquete web se ha inicializado utilizando un objeto de configuración que no coincide con el esquema de la API. - configuration.module tiene una propiedad desconocida ''preLoaders''. Estas propiedades son válidas: objeto {exprContextCritical ?, exprContextRecursive ?, exprContextRegExp ?, exprContextRequest ?, ¿loaders ?, ¿noParse? ? } Opciones que afectan a los módulos normales ( NormalModuleFactory ).

Answer 1

Aparentemente estás intentando usar ejemplos para webpack v1 con webpack v2. Directamente desde el changelog :

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

Answer 2

Desde v2.1-beta.23, la sección de los cargadores cambia de nombre a reglas y pre / postLoaders ahora se define bajo cada regla con la propiedad force.

Así que simplemente cambia el nombre de los preLoaders a las rules y deberías estar listo ;-)

Answer 3

Primero desinstala webpack

npm uninstall webpack --save-dev

seguido por

npm install [email protected] --save-dev

Answer 4

Si está utilizando el paquete web 2, puede usar la etiqueta enforce: ''pre'' dentro de la matriz de cargadores y esto funcionará como una precarga. Consulte el código a continuación para obtener más información.

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

use este en su lugar ./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'')
   }
 }

La documentación se puede encontrar here El problema está relacionado con la versión de ts-loader que instaló.