關(guān)于新手使用webpack配置文件中l(wèi)oaders配置問(wèn)題

自學(xué)使用webpack，copy一個(gè)一年前的教程中的配置文件，但是似乎現(xiàn)在的新版本不支持其中的舊寫(xiě)法，我的配置文件如下：

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  }
}

報(bào)錯(cuò)信息如下：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

求高手指點(diǎn)

回答

編輯回答

挽青絲

看你這個(gè)loader是想用 webpack 配 react 吧。你的 loaders 下面缺了一個(gè) options 。
給你一個(gè)參考（rules 也可以換成 loaders）：

const path =require('path');   
module.exports = {  
  entry: path.resolve(__dirname, 'index.js'),  
  output: {  
    path: path.resolve(__dirname, ''),  
    filename: "bundle.js"  
  },  
  mode: 'development',
  module: {  
    rules: [  
      {  
        test:  /\.js$/,   
        exclude: /node_modules/,  
        loader: "babel-loader",  
        options: {  
          presets: ["es2015","react"]   
        }  
      }  
    ]  
  }  
};

具體的配置你也可以參考我之前寫(xiě)的這篇文章：https://segmentfault.com/a/11...

2018年4月6日 01:59