时间戳

首页 > 解决方案 > 如何使用 Webpack 加载器读取 React js App 中的本地 html 文件内容？

javascript - 如何使用 Webpack 加载器读取 React js App 中的本地 html 文件内容？

问题描述

我正在开发 react js 应用程序并尝试在本地读取 html 文件内容。在特定条件下，我在这样的变量中传递文件 html 数据::

let content = require(`../Designs/${data.path}.html`);

但这给了我错误：

模块解析失败：意外令牌 (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。见 https://webpack.js.org/concepts#loaders

为了解决这个问题，我创建了“webpack.config.js”文件并安装了 webpack、html-loader。我的看起来像这样：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        })
    ]
};

我仍然遇到同样的错误。请帮助或提出一些建议，因为我是 webpack 的新手。

标签： javascriptreactjswebpackwebpack-loader

解决方案

let content = require(`../Designs/${data.path}.html`);

上面的代码是一个动态模块导入。
这意味着模块路径是在运行时（执行代码时）生成的。但是 webpack 不能处理这样的导入。
因为它在创建包时不知道模块的确切路径。
所以我认为最好导入所有文件，然后在代码中切换它们，而不是在运行时生成模块路径。

如果相信文档中的最小示例应该足以满足您的需求。

推荐阅读