javascript - 使用 html-loader 和 extract-loader 将 HTML 导出到他们自己的 html 文件中

Question

我正在尝试转换将在 src 中包含绝对路径的 html 文件。我在 webpack 文档中发现了类似的问题。我尝试将 html-loader 与 extract-loader 一起使用，但出现错误。

1. html 文件 -> simple.html

2. 索引 js 文件：

   import plik from './simple.html'
   

3. webpack.config.js -> [https://webpack.js.org/loaders/html-loader/#export-into-html-files][1]

4. 模块版本 ->

   "file-loader": "^6.2.0",
   "extract-loader": "^5.1.0",
   "html-loader": "^2.1.2",
   "webpack-cli": "^4.6.0",
   "webpack": "^5.28.0"
   

错误：

Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (3:88)
  1 | // Imports
  2 | import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../node_modules/html-loader/dist/runtime/getUrl.js";
 3 | var ___HTML_LOADER_IMPORT_0___ = new URL("./assets/img/xxxxyyyyzzzzz.png", import.meta.url);

 Webpack can resolve **import.meta.url**

有人有类似问题吗？？

Answer 1

看来问题在于extract-loader未维护，这是该 loader 的错误。

据称，有一个解决方案，虽然它只为我产生了一个新问题：

在 s之前运行esModule的选项中禁用s 。换句话说，如果您的配置当前如下所示：html-loaderextract-loader

const config = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    "extract-loader",
                    "html-loader",
                ]
            },
            ...
        ],
        ...
    },
    ...
}

让它看起来像这样：

const config = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    "extract-loader",
                    {
                        loader: "html-loader",
                        options: {
                            esModule: false,
                        },
                    },
                ],
            },
            ...
        ],
        ...
    },
    ...
}

这显然与使用extract-loader转换模块有关babel-preset-env，它已被弃用，@babel/preset-env并且不支持某些较新的语法功能（如 ES 模块）。