webpack打包json文件

article/2025/9/24 13:20:00

项目里新增了json文件,webpack报错如下:

webpack本身是支持json文件读取的,这个报错是babel-loader在报错,也就是说,打包的时候,babel-loader去解析了json文件。babel是js的编译工具,可以把js、ts、react的语法,根据需求编译成浏览器识别的代码。json不属于js,但现在它被当作了js去解析,因此报出了上边的错误。

查看babel-loader的配置,test的正则表达式,会匹配.json文件。

 

将上图修改为:

 

 重新跑项目,报错消失。


http://chatgpt.dhexx.cn/article/KfKFpwDO.shtml

相关文章

React 使用webpack打包

一、项目创建 1、新建一个项目文件夹,打开终端,切换到到项目目录下: npm init -y 这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。 2、新建一个文件夹public,在文件夹内创建index.html文件,添加…

webpack打包工具的基本使用

目录 一、webpack是什么? 二、webpack的基本使用 1、初始化项目 2、安装webpack及其依赖 3、使用 3.1 配置webpack: 3.2 在package.js文件中添加打包命令 3.3 执行打包命令 三、webpack相关插件 插件一:HtmlWebpackPlugin 插件二&a…

webpack打包优化

目录 概述 打包优化-路由懒加载 问题 那什么是路由懒加载呢? 路由懒加载中的魔法注释 小结 打包优化-包大小分析 包大小分析 打包优化-去掉console-log webpack配置排除打包-整体分析 回顾 提问 思路 webpack配置排除打包-打包瘦身 目标 使用方式 webpack配置…

webpack打包工具的使用方法

目录 一、webpack打包工具 1、简介 2.npm补充 3.webpack一系列的步骤 1.npm init -y初始化文件生成package.json文件 2.npm install jquery -S安装jquery包, 3.卸载包的时候,用npm uninstall jquery -S(如果需要卸载的话) 4.在根目录上新建src文…

webpack 打包chunk

chunk的含义以及出现的情况 webpack特定术语在内部用于管理捆绑过程,输出束(bundle)由块组成。 是webpack 根据功能拆分出来的代码片段,包含三种情况 官方: 1.入口起点:使用entry配置手动地分离代码 **2.防止重复…

webpack打包报错

在执行npm run build对项目进行打包的时候遇到webpack打包报错的问题 在网上找到各种方法去解决,什么node版本不兼容啊重装node啊,什么saas没装好python环境啊,webpack版本兼容问题啊!总之各种说法都看着去尝试解决了,…

webpack打包css

webpack打包 1.打包css2.打包逻辑1-1.webpack打包css逻辑 3.打包css4.打包成独立的css文件5.添加样式前缀6.格式校验7.压缩css8.我们为什么要用这个打包工具呢9.webpack的打包顺序10.总结 1.打包css 2.打包逻辑 1-1.webpack打包css逻辑 非js文件打包 需要对应的loadercss-loa…

初识webpack打包

初识webpack打包,小白入门 前言: webpack是一款基于node的构建工具,其中一大特色就是打包 因为现在前端已经工程化开发,写的代码已经不能直接在浏览器上运行了 这时候webpack会帮你把代码进行编译,打包成浏览器识别的…

webpack打包分析

分析一:打包的时间分析 如果我们希望看到每一个loader、每一个Plugin消耗的打包时间,可以借助于一个插件:speed-measure-webpack-plugin注意:该插件在最新的webpack版本中存在一些兼容性的问题(和部分Plugin不兼容&am…

如何使用Webpack打包

简单的说了一下webpack是干嘛的,和webpack如何安装,如何进行打包,步骤很详细,感兴趣的同学可以试着操作一下。 文章目录 1、webpacks是什么?2、Webpack安装3、初始化项目4、使用webpack进行JS打包5、使用webpack进行CS…

webpack打包优化配置

文章目录 前言不进行任何打包配置代码分离splitChunkruntimeChunk动态导入 css文件处理css文件提取css文件压缩css实现Tree Shaking js实现Tree shakingTerserscope Hoisting打包优化没效果打包界面显示分析总结 前言 之前使用webpack进行项目搭建配置时,都是操作一…

webpack打包路径更改_webpack打包教程

创建package.json文件 命令:npm init 安装webpack npm install --save-dev webpack npm install --save-dev webpack-cli 全局安装: npm install --global webpack webpack-cli 打包 默认entry入口 src/index.js 默认output出口 dist/main.js 打包模式: webpack --mode deve…

Vue基础知识总结 9:vue webpack打包原理

🏆作者简介:哪吒,CSDN2022博客之星Top1、CSDN2021博客之星Top2、多届新星计划导师✌、博客专家💪,专注Java硬核干货分享,立志做到Java赛道全网Top N。 🏆本文收录于,Java基础教程系列…

webpack 打包流程

流程梳理 在开始之前我们先对于整个打包流程进行一次梳理。 这里仅仅是一个全流程的梳理,现在你没有必要非常详细的去思考每一个步骤发生了什么,我们会在接下来的步骤中去一步一步带你串联它们。 整体我们将会从上边5个方面来分析Webpack打包流程: 初…

Webpack打包

webpack【依赖node环境】 什么是webpack? 从本质上将,webpack是一个现代的JavaScript应用的静态模板打包工具。 前端模块化: 前端模块化是指,通过将前端代码根据一定的规则解耦封装成几个代码文件(模块)&…

使用webpack打包vue项目

使用webpack打包vue项目 安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: //在项目中安装,这里的-D表示运用到…

Idea 2017.3.+永久破解方法

一、下载Intellij IDEA2017.3.5x64旗舰版 去官网下载此处不赘述 二、下载破解jar包 链接在此http://idea.lanyus.com/jar/JetbrainsCrack-2.7-release-str.jar 三、打开安装好的IDEA路径下的bin目录 将下载好的jar包复制进来 例如 四、修改bin目录下的两个文件 idea.exe…

InetlliJ IDEA 2017破解(亲测,可用)

1.InetlliJ安装好后,启动,至License Activation界面; 2.选择License server; 3.在License server address中填入 http://idea.imsxm.com/

Intellij IDEA2017安装破解

IntelliJ IDEA(2017)安装和破解 IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE支持、各类版本工具(Git、svn、gith…

idea 2017 破解 可以使用

新版本的 自从升级到idea2017.3之后,之前的license server破解方法貌似已失效.于是找到大神用的破解插件,很好很强大. 安装好idea之后不要打开软件,从http://idea.lanyus.com/下载破解插件,这里面的插件是进行更新的,可能已经不是下面的文件名了&#xf…