Webpack将一堆Pug模板编译成HTML

mwg9r5ms  于 2023-10-19  发布在  Webpack
关注(0)|答案(2)|浏览(184)

我开始使用webpack,但有一件事我不能为我的生活工作是如何采取一个文件夹(与可能的嵌套文件夹),充满.pug模板,并简单地将它们编译为静态html并将它们放在输出文件夹中,为每个输出html文件保持任何嵌套的文件夹结构,在源模板文件夹中。
我不想手动指定每个单独的.pug文件,我绝对不希望webpack尝试将.pugs解析为JS,然后尝试要求/导入pug文件中的任何imgs/字体等,然后抱怨它,我只是在一个基本的静态1:1编译后,pug文件输入,html文件输出。为什么这么难呢?

ohfgkhjo

ohfgkhjo1#

使用pug-html-loader将.pug转换为.html文件。使用file-loader将文件复制到所需位置。不要使用html-loader,因为你不想处理生成的文件所使用的资源。
你将在你的加载器规则中结束类似这样的东西(未经测试,webpack1语法,你可能需要为webpack2调整它)

{
    test: /\.pug$/,
    loaders: ['file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false']
}

接下来你需要在你的条目文件中要求所有的pug文件

function requireAll (r) { r.keys().forEach(r); }
requireAll(require.context('./', true, /\.pug$/));
w8rqjzmb

w8rqjzmb2#

这可以很简单地做到只有html-webpack-plugin和pug-loader。

webpack.config.js

const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // No javascript entrypoint to evaluate. Let the plugin do the heavy lifting
  entry: {},
  // Define how to translate Pug to HTML
  module: { rules: [ { test: /\.pug$/, use: 'pug-loader' } ] },
  // Generate the HTML file from template
  plugins: [ new HTMLWebpackPlugin({ template: './src/index.pug' }) ]
};

./src/index.pug

doctype html
html(lang="en")
  head
    include path/to/another.pug
...

https://extri.co/2017/05/23/using-htmlwebpackplugin-and-pug/得到了这些信息,你也可以进一步导入css和JavaScript,就像通常用html-webpack-plugin做的那样。

相关问题