Node.js 如何让文件加载器在markdown内插到Webpack4捆绑的pug模板中的本地图像上触发？_Node.js_Webpack_Markdown_Html Webpack Plugin_Pug Loader

Node.js 如何让文件加载器在markdown内插到Webpack4捆绑的pug模板中的本地图像上触发？

node.js webpack markdown

Node.js 如何让文件加载器在markdown内插到Webpack4捆绑的pug模板中的本地图像上触发？,node.js,webpack,markdown,html-webpack-plugin,pug-loader,Node.js,Webpack,Markdown,Html Webpack Plugin,Pug Loader,首先，让我分析一下我的项目设置/我正在尝试做的事情：文件结构： index.md 哈巴狗 image.jpg 在我的标记文件中，我嵌入了一个图像： Here is a local image (we want webpack's file loader to get triggered on it, and replace the local path with a bundled resource hash): ![image](./image.jpg) 在我的哈巴狗模板中，我插入降

首先，让我分析一下我的项目设置/我正在尝试做的事情：

文件结构：

index.md
哈巴狗
image.jpg

在我的标记文件中，我嵌入了一个图像：

Here is a local image (we want webpack's file loader to get triggered on it, and replace the local path with a bundled resource hash): 
![image](./image.jpg)

在我的哈巴狗模板中，我插入降价：

include:markdown-it(html, linkify) ./index.md

现在，第4页出现在图片中。以下是我的（近似）配置：

插件：

new HtmlWebpackPlugin({
  template: './src/index.pug'
}),

规则：

{
  test: /\.pug$/,
  loaders: [
    // html loader gets webpack to process <img> src
    'html-loader',
    // requires pretty option otherwise some spacing between elements is lost
    'pug-html-loader?{"interpolate":true,"pretty":true,"exports":false}'
  ],
}

请参见以下答案：

现在，当我运行webpack时，出现以下错误：

Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.pug] 500 bytes {HtmlWebpackPlugin_0} [built] [failed] [1 error]
    ERROR in ./src/index.pug (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.pug)
    Module build failed (from ./node_modules/pug-html-loader/lib/index.js):
    TypeError: require is not a function
        at eval (eval at wrap (/mnt/c/Users/arcop/git/yardwork-site/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:26:752)  
        at template (eval at wrap (/mnt/c/Users/arcop/git/yardwork-site/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:34:689)
        at Object.module.exports (/mnt/c/Users/arcop/git/yardwork-site/node_modules/pug-html-loader/lib/index.js:33:10)

子HtmlWebpackCompiler:
1资产
入口点HtmlWebpackPlugin\u 0=\u子级-HtmlWebpackPlugin\u 0
[./node_modules/html webpack plugin/lib/loader.js./src/index.pug]500字节{HtmlWebpackPlugin_0}[builded][failed][1错误]
./src/index.pug（./node_modules/html网页包plugin/lib/loader.js./src/index.pug）中出错
模块构建失败（来自./node_modules/pug html loader/lib/index.js）：
TypeError:require不是函数
评估时（在wrap时评估（/mnt/c/Users/arcop/git/yardwork site/node_modules/pug runtime/wrap.js:6:10），：26:752）
at模板（在wrap时进行评估（/mnt/c/Users/arcop/git/yardwork site/node_modules/pug runtime/wrap.js:6:10），：34:689）
在Object.module.exports（/mnt/c/Users/arcop/git/yardwork site/node_modules/pug html loader/lib/index.js:33:10）

紧接着上面是一个更长、更详细的堆栈跟踪：

ERROR in   Error: Child compilation failed:
  Module build failed (from ./node_modules/pug-html-loader/lib/index.js):
  TypeError: require is not a function




  - TypeError: require is not a function

  - ModuleBuildError: Module build failed (from ./node_modules/pug-html-loader/lib/index.js):

  - TypeError: require is not a function



  - index.js:33 Object.module.exports
    [yardwork-site]/[pug-html-loader]/lib/index.js:33:10

  - NormalModule.js:316 runLoaders
    [yardwork-site]/[webpack]/lib/NormalModule.js:316:20

  - LoaderRunner.js:367
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:367:11

  - LoaderRunner.js:233
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:233:18

  - LoaderRunner.js:143 runSyncOrAsync
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:143:3

  - LoaderRunner.js:232 iterateNormalLoaders
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:232:2

  - LoaderRunner.js:205 Array.<anonymous>
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:205:4

  - CachedInputFileSystem.js:55 Storage.finished
    [yardwork-site]/[enhanced-resolve]/lib/CachedInputFileSystem.js:55:16

  - CachedInputFileSystem.js:91 provider
    [yardwork-site]/[enhanced-resolve]/lib/CachedInputFileSystem.js:91:9

  - graceful-fs.js:115
    [yardwork-site]/[graceful-fs]/graceful-fs.js:115:16

  - read_file_context.js:53 FSReqWrap.readFileAfterClose [as oncomplete]
    internal/fs/read_file_context.js:53:3

  - child-compiler.js:131 childCompiler.runAsChild
    [yardwork-site]/[html-webpack-plugin]/lib/child-compiler.js:131:18

  - Compiler.js:343 compile
    [yardwork-site]/[webpack]/lib/Compiler.js:343:11

  - Compiler.js:681 hooks.afterCompile.callAsync.err
    [yardwork-site]/[webpack]/lib/Compiler.js:681:15


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:678 compilation.seal.err
    [yardwork-site]/[webpack]/lib/Compiler.js:678:31


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1423 hooks.optimizeAssets.callAsync.err
    [yardwork-site]/[webpack]/lib/Compilation.js:1423:35


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
    [yardwork-site]/[webpack]/lib/Compilation.js:1414:32


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1409 hooks.additionalAssets.callAsync.err
    [yardwork-site]/[webpack]/lib/Compilation.js:1409:36

错误：子编译失败：
模块构建失败（来自./node_modules/pug html loader/lib/index.js）：
TypeError:require不是函数
-TypeError:require不是函数
-ModuleBuildError:模块构建失败（来自./node_modules/pug html loader/lib/index.js）：
-TypeError:require不是函数
-js:33 Object.module.exports
[yardwork site]/[pug html loader]/lib/index.js:33:10
-js:316运行加载程序
[yardwork site]/[webpack]/lib/NormalModule.js:316:20
-LoaderRunner.js:367
[yardwork site]/[loader runner]/lib/LoaderRunner.js:367:11
-LoaderRunner.js:233
[yardwork site]/[loader runner]/lib/LoaderRunner.js:233:18
-js:143 runSyncOrAsync
[yardwork site]/[loader runner]/lib/LoaderRunner.js:143:3
-js:232迭代器
[yardwork site]/[loader runner]/lib/LoaderRunner.js:232:2
-js:205数组。
[yardwork site]/[loader runner]/lib/LoaderRunner.js:205:4
-CachedInputFileSystem.js:55 Storage.finished
[yardwork site]/[enhanced resolve]/lib/CachedInputFileSystem.js:55:16
-CachedInputFileSystem.js:91提供程序
[yardwork site]/[enhanced resolve]/lib/CachedInputFileSystem.js:91:9
-财政司司长:115
[yardwork site]/[graceful fs]/graceful fs.js:115:16
-read_file_context.js:53 FSReqWrap.readFileAfterClose[作为oncomplete]
内部/fs/read_file_context.js:53:3
-child compiler.js:131 childCompiler.runAsChild
[yardwork站点]/[html网页包插件]/lib/child compiler.js:131:18
-js:343编译
[yardwork site]/[webpack]/lib/Compiler.js:343:11
-Compiler.js:681 hooks.afterCompile.callAsync.err
[yardwork site]/[webpack]/lib/Compiler.js:681:15
-js:154 AsyncSeriesHook.lazycomilehook
[yardwork site]/[tapable]/lib/Hook.js:154:20
-Compiler.js:678 compilation.seal.err
[yardwork site]/[webpack]/lib/Compiler.js:678:31
-js:154 AsyncSeriesHook.lazycomilehook
[yardwork site]/[tapable]/lib/Hook.js:154:20
-Compilation.js:1423 hooks.optimizeAssets.callAsync.err
[yardwork site]/[webpack]/lib/Compilation.js:1423:35
-js:154 AsyncSeriesHook.lazycomilehook
[yardwork site]/[tapable]/lib/Hook.js:154:20
-Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
[yardwork site]/[webpack]/lib/Compilation.js:1414:32
-js:154 AsyncSeriesHook.lazycomilehook
[yardwork site]/[tapable]/lib/Hook.js:154:20
-Compilation.js:1409 hooks.additionalAssets.callAsync.err
[yardwork site]/[webpack]/lib/Compilation.js:1409:36

require不是一个函数

向我暗示，在管道中的某个地方，ES6 javascript在CommonJS中变得一团糟，但我真的知道得不够

不幸的是，我完全不知所措。我尝试的配置方式完全可能不受支持。非常感谢您的任何想法/建议

ERROR in   Error: Child compilation failed:
  Module build failed (from ./node_modules/pug-html-loader/lib/index.js):
  TypeError: require is not a function




  - TypeError: require is not a function

  - ModuleBuildError: Module build failed (from ./node_modules/pug-html-loader/lib/index.js):

  - TypeError: require is not a function



  - index.js:33 Object.module.exports
    [yardwork-site]/[pug-html-loader]/lib/index.js:33:10

  - NormalModule.js:316 runLoaders
    [yardwork-site]/[webpack]/lib/NormalModule.js:316:20

  - LoaderRunner.js:367
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:367:11

  - LoaderRunner.js:233
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:233:18

  - LoaderRunner.js:143 runSyncOrAsync
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:143:3

  - LoaderRunner.js:232 iterateNormalLoaders
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:232:2

  - LoaderRunner.js:205 Array.<anonymous>
    [yardwork-site]/[loader-runner]/lib/LoaderRunner.js:205:4

  - CachedInputFileSystem.js:55 Storage.finished
    [yardwork-site]/[enhanced-resolve]/lib/CachedInputFileSystem.js:55:16

  - CachedInputFileSystem.js:91 provider
    [yardwork-site]/[enhanced-resolve]/lib/CachedInputFileSystem.js:91:9

  - graceful-fs.js:115
    [yardwork-site]/[graceful-fs]/graceful-fs.js:115:16

  - read_file_context.js:53 FSReqWrap.readFileAfterClose [as oncomplete]
    internal/fs/read_file_context.js:53:3

  - child-compiler.js:131 childCompiler.runAsChild
    [yardwork-site]/[html-webpack-plugin]/lib/child-compiler.js:131:18

  - Compiler.js:343 compile
    [yardwork-site]/[webpack]/lib/Compiler.js:343:11

  - Compiler.js:681 hooks.afterCompile.callAsync.err
    [yardwork-site]/[webpack]/lib/Compiler.js:681:15


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:678 compilation.seal.err
    [yardwork-site]/[webpack]/lib/Compiler.js:678:31


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1423 hooks.optimizeAssets.callAsync.err
    [yardwork-site]/[webpack]/lib/Compilation.js:1423:35


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
    [yardwork-site]/[webpack]/lib/Compilation.js:1414:32


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [yardwork-site]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1409 hooks.additionalAssets.callAsync.err
    [yardwork-site]/[webpack]/lib/Compilation.js:1409:36