Webpack ES6- 使用动态导入加载Json文件（保留Json文件）

Question

我正在尝试将我的json文件（2个文件）拆分成不同的块。我已经成功实现了，但是有一个“缺点”。

这些json文件通过webpack转换为.js，因此我向.json文件添加了file-loader，然而await import现在返回一个字符串而不是json。 Webpack规则

module: {
    rules: [
        { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader",] },
        { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
        { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=fonts/[name].[ext]" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]" },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/vnd.ms-fontobject&name=fonts/[name].[ext]" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]" },
        {
            test: /\.(js|jsx)$/,
            // Skip any files outside of project's `src` directory
            include: [
                path.resolve(__dirname, "../src"),
            ],
            loaders: ["babel-loader"],
        },
        {
            test: /\.json$/,
            type: "javascript/auto",
            loader: "file-loader",
            options: { name: "i18/[name].[ext]" },
            include: [
                path.resolve(__dirname, "../src"),
            ],
        },
        { test: /\.(jpg|png)$/, loader: "url-loader" }
    ]
}

请注意test: /\.json$/规则。

我想使用file-loader来加载它，而不是默认的webpack捆绑js。

请注意：没有这个规则，应用程序可以正常工作，但我需要那些.json文件。

这是最终结果： 两个json都没问题。 问题出在i18n.0<...>和i18n.1上，它们分别代表en-US和pt-PT。

现在...我正在使用动态导入调用这些文件（无需转码）：

/* This loading must be async, it will load the file from the server on-demand */

export const getLanguageFile = async (lang = "en-US") 
   => await import(/* webpackChunkName: "i18n." */ `../i18n/${lang}.json`);

这里被称为：

async componentDidMount() {
    /* Get user info (properties) */
    var properties = await fetch.get("/account/GetUserProperties");

    /* Get language file based in the language code provided in the properties */
    var file = await getLanguageFile(properties.data.LanguageCode);
    this.props.setUserProperties(properties.data, file);
}

这个最后一个变量file被赋值为：

这个变量应该包含文件中完整的JSON。

我知道为什么会出现这种情况，因为它将调用i18n.0<...>而不是.json文件，而该文件包含以下内容：

(window.webpackJsonp = window.webpackJsonp || [])
    .push(
        [[2], {
            "./src/translations/i18n/en-US.json": function (n, o, s) {
                n.exports = s.p + "i18/en-US.json"
            }
        }]
    );

我该如何使用动态导入调用这些json文件，但又保留完整的json文件呢？

我需要这个json文件因为它可能会在服务器端进行编辑。

- Leandro Soares

Answer 1

好的，我是你的有益助手，以下是内容翻译：

我是如何解决这个问题的呢？

我没有使用import()，而是通过xhr请求文件来解决问题。

但是，还存在一个问题：我仍然需要将文件放在dist文件夹中。

为了做到这一点，我使用了copy-webpack-plugin插件，在打包过程中可以将文件和文件夹转移至任意位置。

我删除了json规则，并添加了以下插件：

new CopyWebpackPlugin([{ from: "src/translations/i18n", to: "i18n" }]),

好的，它正在将i18n文件夹转储到dist中：

之后，我将我的函数getLanguageFile更改为：

export const getLanguageFile = async (lang = "en-US") 
   => (await axios.get(`/i18n/${lang}.json`)).data;

这将以json格式返回文件，全部都能完美运行。

注意

开发环境: webpack-dev-server (服务器) + ASP.Net Core (API)

生产环境: ASP.Net Core (服务器和API)

- Leandro Soares

---

使用 CopyWebpackPlugin，您可以操纵哈希来避免像 to: 'to/[name].[hash].[ext]' 这样的问题。 - Leandro Soares

你知道如何在使用中引用哈希表吗？例如在获取(fetch)中。 - gotbahn