Question

首先，请原谅我成为新手，并告诉我可以做些什么来在这里获得帮助。

tl：dr;除pug的扩展/阻止功能外，一切都按预期工作。使用include可以成功导入相同的内容，但是将调用更改为一个块后，该部分内容将不再在webpack的CLI中注册（请谅解我在这里缺乏行话知识），并且没有内容呈现到页面上。

无论是分部文件位于index.pug的同一目录还是子目录中，都是这种情况。我更喜欢使用子目录，这就是为什么我格式化以下示例的原因。

好的，所以...

我的文件夹结构如下：

src
- webpackConfig.js
- html
  - index.pug
  - 局部
    - some-partial.pug

webpackConfig.js（摘录）

module.exports = {
entry: {
    app: path.resolve(__dirname, 'src', 'index.js'),
},

plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        title: 'Site',
        template: 'src/html/index.pug',
        inject: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[hash].css',
        chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
], 
output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
},
module {
  rules: [{
            test: /\.pug$/,
            use: [{
                loader: 'pug-loader',
                options: {
                    pretty: true,
                    // root: path.resolve(__dirname, 'src/html')
                }
            }]
        }]
}

index.pug

include partials/header
block some-partial

partials / some-partial.pug

extends /../../index.pug
block some-partial
  p I'm some text.

*注意：我已经尝试了index.pug目录格式的多个版本，但都在同一目录和子目录中都使用了some-partial.pug。

我很困惑。我在网上阅读的所有内容都表示这应该...有效。当所有其他功能都按预期工作时，我有点茫然。

在导入图像/本地字体时，我一直遇到相对路径的问题，所以我想这与Pug文件如何查看目录树有关？（如果有道理）但是为什么“ include”仍然起作用？

任何人和所有帮助/线索都非常感谢！

使用Pug 2和Webpack 4，“包含”可正确导入内容，但“扩展/阻止”不会产生任何内容或错误

0 个答案: