解决create-react-app .json文件无法正常打包

最新推荐文章于 2022-02-09 10:19:09 发布

Simon_youth

最新推荐文章于 2022-02-09 10:19:09 发布

阅读量915

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack react json create-react-app npm run build

本文链接：https://blog.youkuaiyun.com/qq_39711712/article/details/86412919

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何解决使用create-react-app创建的React应用中，非public目录下的JSON文件无法被正确打包的问题。通过修改webpack配置，添加特定的loader来处理JSON文件，确保其能在构建后的应用中正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题情景

使用create-react-app创建react应用，在除public目录里的.json文件（在public目录里的文件会copy）
src/data/population.json
import './data/population.json'
npm run build之后根本没有这个json。

解决方法

首先npm run reject暴露webpack配置文件
在config/webpack.config.dev.js, config/webpack.config.prod.js 添加

module: {
 rules: [
   ....
   {
       type: 'javascript/auto', // 敲重点！！！
       test: /\.(json)$/,
       exclude: /node_modules/,
       use: {
         loader: 'file-loader',
         options: {
           name: '[name].[ext]',
         },
       },
   },
   ....
 ]
}