以前做vue项目都好好的,最近做react,公共配置感觉加个jsx就可以了吧,然而不是这样的。

一、问题描述

You may need an appropriate loader to handle this file type。

二、问题分析

babelrc我配置了,babel-loader也配置正确,问题出现在include值上面,还原现场。

module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
        }]
}

三、解决方案

去掉最后一行配置即可,像这样写。

module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
}

四、疑惑

但是之前做vue项目的时候,我加include配置就不会报错呢,react项目咋就不行了呢?匪夷所思,后续补充。。。

webpack报错需要合适的loader的更多相关文章

  1. webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"?

    webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find mo ...

  2. webpack 报错 No PostCSS Config found 解决方案。

    webpack 报错 No PostCSS Config found  这个问题我在百度上找了好久,也没有找到解决方案,最后没有办法只能自己去啃官方文档,本案例在本人的webpack 学习感悟中已经写 ...

  3. webpack报错no postcss config...

    终端里运行的错误: 查了好多资料,最后找到解决办法,改为: const webpack = require('webpack'); // const autoprefixer = require('a ...

  4. Vue+webpack报错: listen EADDRINUSE: address already in use :::8080

    如果本地运行多个vue+webpack项目会报错:listen EADDRINUSE: address already in use :::8080: 提示含义:地址端口已经被占用 注:8080指的是 ...

  5. webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)

    用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...

  6. webpack报错Cannot read property 'presetToOptions' of undefined

    在学习react全家桶时,webpack首先报错,报错内容如下,最后我是因为没有全局安装webpack导致的报错,使用npm install webpack -g安装解决了这个问题.

  7. react脚手架抽离webpack报错解决

    我们在写react项目的时候,可能原有的webpack配置不满足我们的需求,需要自己去配置,可是你在创建脚手架的时候并不能在外部找到webpack文件,脚手架的webpack文件在node_modul ...

  8. Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法

    1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依赖包不兼容. 可以查看你的 package.json 的依赖列表 即有 babel 7.0 版本的( @ ...

  9. webpack报错

    webpack-dev-server --inline --progress --config build/webpack.dev.conf.js internal/modules/cjs/loade ...

随机推荐

  1. Time travel HDU - 4418(高斯消元)

    Agent K is one of the greatest agents in a secret organization called Men in Black. Once he needs to ...

  2. Unity 阴影的制作方式

    Unity阴影制作的三种方式. 方式一:Light中Shadow Type的类型 包括Hard Shadows.Soft Shadows.No Shadows:  Mesh Renderer中的属性 ...

  3. Browserify模块化使用教程

    Browserify模块化使用教程 创建项目结构 |-js |-dist //打包生成文件的目录 |-src //源码所在的目录   |-module1.js   |-module2.js   |-m ...

  4. 爬虫保存cookies时重要的两个参数(ignore_discard和ignore_expires)的作用

    两个参数的作用: 官方的解释: ignore_discard: save even cookies set to be discarded. ignore_expires: save even coo ...

  5. EF CodeFirst系列(9)---添加初始化数据和数据库迁移策略

    1.添加初始化数据(Seed) 我们可以在初始化数据库的过程中给数据库添加一些数据.为了实现初始化数据(seed data)我们必须创建一个自定义的数据库初始化器(DB initializer),并重 ...

  6. Vue Material

    Material Design是什么? https://www.zhihu.com/topic/20005114/top-answers 我们挑战自我,为用户创造了崭新的视觉设计语言.与此同时,新的设 ...

  7. C++自定义String字符串类,支持子串搜索

    C++自定义String字符串类 实现了各种基本操作,包括重载+号实现String的拼接 findSubStr函数,也就是寻找目标串在String中的位置,用到了KMP字符串搜索算法. #includ ...

  8. 【汇总目录】Java

    疯狂Java学习笔记 [2019年03月20日] Lambda表达式与函数式接口 [2019年03月20日] Lambda表达式概念与基本语法 [2019年03月18日] 内部类 [2019年02月1 ...

  9. What a Ridiculous Election UVALive - 7672 (BFS)

    题目链接: E - What a Ridiculous Election  UVALive - 7672 题目大意: 12345 可以经过若干次操作转换为其它五位数. 操作分三种,分别为: 操作1:交 ...

  10. Jetty - 教程

    Jetty使用教程(一)——开始使用Jetty : https://www.cnblogs.com/yiwangzhibujian/p/5832597.html jetty 的工作原理以及与 Tomc ...