使用文件加载器和Webpack尝试加载大型JSON文件

Question

我一直在尝试几种方法来加载一个需要在我的React App中使用的大型JSON（> 144 MB）文件，使用Webpack（v4.3）。我正在遵循GitHub Issue on Webpack，并尝试在Webpack中使用file-loader。下面是webpack.config.js文件。

当我尝试调试const ORIGIN_DESTINATION_DATA = require（'../.././data/./origin_destination.json'）;的值时，我发现ORIGIN_DESTINATION_DATA包含“src / data / destination_origin.json”字符串，而不是实际的JSON数据。

var webpack = require('webpack');
var path = require('path');

const flaskApp = path.join(__dirname, '../', 'app_name');

module.exports = {
 entry: __dirname + '/src/index.jsx',
 output: {
  path: flaskApp + '/static',
  filename: 'bundle.js',
 },
 resolve: {
  extensions: ['.js', '.jsx', '.css', '.json']
 },
 module: {
  rules: [{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
   }, {
    test: /\.less$/,
    loaders: ["style-loader", "css-loader", "less-loader"]
   }, {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
   }, {
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    loader: 'url-loader?limit=100000'
   }, {
    test: /\.geojson$/,
    loader: 'url-loader?limit=100000'
   }, {
    type: 'javascript/auto',
    test: /\.json$/,
    use: [{
      loader: 'file-loader',
      options: {
       name: "[path][name].[ext]"
      }
     }
    ]
   }

  ]
 },
};

- John

---

file-loader确实可以为你提供输出文件夹中文件的路径。这就是为什么它对于处理非js资源非常有用，比如图片（通常不希望将图片捆绑到js文件中）。你也不想将140M的json数据文件捆绑在一起。因此，你需要使用fetch手动加载json文件，并使用来自加载器的URL。另外，我建议你重新组织你的数据。一次加载140Mb的数据听起来不是个好主意。 - Yury Tarabanko

谢谢 @YuryTarabanko，我现在要将数据移动到 Elastic Search，感谢您的回答。 - John

Answer 1

你可以使用copyWebpackPlugin: https://webpack.js.org/plugins/copy-webpack-plugin/ 它基本上将你的文件或文件夹从a复制到b

在webpack.config中：

const CopyPlugin = require("copy-webpack-plugin");
...
plugins: [
    new CopyPlugin([
        {
            from: path.resolve(__dirname, "src/pathTo/giantJsonFolder"),
            to: "assets",
        },
    ]),
],

然后在需要的地方获取它：

const response = await fetch('assets/filename.json')
const json = await response.json();
console.log(json)

- user8094098