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

Question

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

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

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

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

我到底想达到什么目的：

我的文件夹结构基于

• app

  ./pug

  ./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$/));