如何获取文件加载器以在Markdown内插到由Webpack 4捆绑的哈巴狗模板中的本地图像上触发？

如何解决如何获取文件加载器以在Markdown内插到由Webpack 4捆绑的哈巴狗模板中的本地图像上触发？

首先让我分解项目设置/我要做的事情：

文件结构：

index.md
index.pug
image.jpg

在我的markdown文件中，嵌入了一张图片：

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)

在哈巴狗模板中，内插markdown：

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

现在，Webpack 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应该生成一个index.html文件，看起来像这样：

<img src='a_generated_resource_hash.jpg` alt=''>

查看以下答案：

现在，当我运行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)

紧邻上面是更长，更详细的堆栈跟踪：

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

require is not a function向我暗示，ES6 javascript管道中的某个地方正与Commonjs混为一谈，但是我真的还不够了解。

不幸的是，我完全不懂我的意思。完全不支持我尝试配置事物的方式。任何想法/建议都非常感谢！

如何获取文件加载器以在Markdown内插到由Webpack 4捆绑的哈巴狗模板中的本地图像上触发？

如何解决如何获取文件加载器以在Markdown内插到由Webpack 4捆绑的哈巴狗模板中的本地图像上触发？

相关推荐