因为之前一直用的是脚手架创建项目,第一次自己学习创建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打包错误的更多相关文章

  1. 关于react打包之后静态资源加载错误的问题

    之前在打包react项目时发现一些问题,打包出来后我的一部分png图标加载不出来,开发者模式发现他们的路径中莫名其妙混入了我在react-router路由中使用<Browserrouter> ...

  2. 解决Maven并行编译中出现打包错误问题的思路

    解决Maven并行编译中出现打包错误问题的思路 并行构建 Maven 3.x 提供了并行编译的能力,通过执行下列命令就可以利用构建服务器的多线程/多核性能提升构建速度: mvn -T 4 clean ...

  3. [RN] React Native 错误 Module does not exist in the module map

    React Native 错误 Module does not exist in the module map 代码如下: import Login from 'login' import Index ...

  4. webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js

    webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js:https://www.jianshu.com/p/a55fb5bf75e1

  5. webpack4.16压缩打包

    webpack4.16压缩打包 本文所用插件版本如下: nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快,差不多几个月就会出一版,最新的4系列 ...

  6. webpack4构建react脚手架

    create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...

  7. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  8. android 打包错误

    打包时报如下错误: Export aborted because fatal lint errors were found. These are listed in the Lint View. Ei ...

  9. Eclipse导出jar包Unity打包错误

    前几天接SDK使用的是Android Studio昨天打开AndroidStudio后自动更新了gradler然后失败了然后AndroidStudio就挂了.就是用之前的方法Eclipse到处jar包 ...

随机推荐

  1. python 案例一(电话铺)

    经过自己努力,做了一个简单的电话铺的录入和查询小程序,比较简单,喜欢的朋友可以练练手. 题目: 创建你自己的命令行 地址簿 程序.在这个程序中,你可以添加.修改.删除和搜索你的联系人(朋友.家人和同事 ...

  2. 在线官网Spring Initializr 或 IntelliJ IDEA 快速搭建springboot项目

    Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置’,实现零配置. 那么,如何快速新建一个一个spring ...

  3. shell逻辑运算符 1

    逻辑卷标 表示意思 1. 关于档案与目录的侦测逻辑卷标! -f 常用!侦测『档案』是否存在 eg: if [ -f filename ] -d 常用!侦测『目录』是否存在 -b 侦测是否为一个『 bl ...

  4. 关于token,session,cookie的概念和区别

    记录几篇讲的比较好的文章 https://www.cnblogs.com/moyand/p/9047978.html https://blog.csdn.net/wabiaozia/article/d ...

  5. 关于一篇对epoll讲的比较好的一篇文章

    原文地址http://www.cnblogs.com/lojunren/p/3856290.html 前言 I/O多路复用有很多种实现.在linux上,2.4内核前主要是select和poll,自Li ...

  6. PhoneGap 的存储 API_Web Sql

    一.介绍 此 API 基于 W3C WEB SQL Database Specification 和 W3C Web Storage API Specification. 有些 设备已经提供了对该规范 ...

  7. django 静态文件

    django 1.8版本以上 django 静态文件配置. 小作之前, 一直觉得django的静态文件配置非常的麻烦. 1. 要设置url(r'^static/(?P<path>.*)&a ...

  8. 2014年百度之星资格赛第一题Energy Conversion

    Problem Description 魔法师百小度也有遇到难题的时候-- 如今.百小度正在一个古老的石门面前,石门上有一段古老的魔法文字,读懂这样的魔法文字须要耗费大量的能量和大量的脑力. 过了许久 ...

  9. textarea使换行变顿号

    window.onload = function(){ document.getElementById('area').addEventListener('keydown',function(e){ ...

  10. 第六章.MyBatis缓存结构

    一级缓存 测试案例: MyBatisTest.java //缓存 @Test public void testFindCustomerCache1() throws Exception{ SqlSes ...