webpack4的react打包错误

因为之前一直用的是脚手架创建项目，第一次自己学习创建webpack打包。loader我是复制别人的。

 module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },

结果打包的时候报错了。

ERROR in ./js/index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In I:\desk\File Manager\Demo\react\my-app\node_modules\babel-preset-react\lib\index.js
at createDescriptor (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:179:11)
at I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:104:12
at Array.map (<anonymous>)
at createDescriptors (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:103:27)
at createPresetDescriptors (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:95:10)
at I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:81:14
at cachedFunction (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\caching.js:40:17)
at presets (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:26:68)
at mergeChainOpts (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-chain.js:298:68)
at I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-chain.js:251:7
at buildRootChain (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\config-chain.js:64:27)
at loadPrivatePartialConfig (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\partial.js:41:53)
at loadFullConfig (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\config\full.js:33:37)
at transformSync (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\transform-sync.js:13:36)
at Object.transform (I:\desk\File Manager\Demo\react\my-app\node_modules\@babel\core\lib\transform.js:20:65)
at transpile (I:\desk\File Manager\Demo\react\my-app\node_modules\babel-loader\lib\index.js:55:20)
at Object.module.exports (I:\desk\File Manager\Demo\react\my-app\node_modules\babel-loader\lib\index.js:179:20)

去官网上看了一下发现官网上presets里面都是 @babel/xxx，跟着试了一下果然如此

npm install @babel/preset-react --save-dev

npm install @babel/preset-react --save-es2015

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react','@babel/preset-es2015']
          }
        }
      }
    ]
  }

webpack4的react打包错误

推荐阅读