webpack - 无法使用 webpack 编译文件夹中的每个 .pug 文件

Question

我正在尝试使用基于以下技术的技术堆栈使用 Webpack 创建环境：

• 哈巴狗，用于模板 HTML
• sass，用于 CSS
• ES7

但是我在创建 pug HTML 文件时遇到了问题。

这是我的 webpack.config.js 文件的要点https://gist.github.com/anonymous/84c02222a44ce219c35ff1a8beeff720

我到底想要实现什么：

我有一个基于的文件夹结构

• 应用程序

  ./哈巴狗

  ./components, ./views

我想要做的是编译视图文件夹中的每个 pug 文件并将其转换为 HTML 并将其发送到 dist 文件夹。

你们能帮帮我好吗？

谢谢。

Answer 1

我终于解决了我的问题。我不记得我在哪里找到了这个解决方案，但它确实有效，哈哈

以下是我们如何编译.pug文件夹中的每一个：

首先，将其添加到您的module对象中，在 webpack 文件中： { test: /\.pug$/, loaders: [ 'file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false' ] },

然后将这个函数添加到 webpack 的入口文件中 function requireAll(r) { r.keys().filter(r => r.forEach(r)) } requireAll(require.context('./', true, /\.pug$/));