Question

我一直在尝试使用Webpack（v4.3）在我的React App中加载一个大型json（> 144 MB）文件。我关注GitHub Issue on Webpack 并尝试使用Webpack的文件加载器。 PFB，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]"
						}
					}
				]
			}

		]
	},
};

Answer 1

您可以使用copyWebpackPlugin：https://webpack.js.org/plugins/copy-webpack-plugin/

它基本上将文件或文件夹从a复制到b

在webpack.config中：

!python main.py

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

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

尝试使用file-loader和webpack加载大型json文件

1 个答案: