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
...
2条答案
按热度按时间ohfgkhjo1#
使用
pug-html-loader
将.pug转换为.html文件。使用file-loader
将文件复制到所需位置。不要使用html-loader
,因为你不想处理生成的文件所使用的资源。你将在你的加载器规则中结束类似这样的东西(未经测试,webpack1语法,你可能需要为webpack2调整它)
接下来你需要在你的条目文件中要求所有的pug文件
w8rqjzmb2#
这可以很简单地做到只有html-webpack-plugin和pug-loader。
webpack.config.js
./src/index.pug
从https://extri.co/2017/05/23/using-htmlwebpackplugin-and-pug/得到了这些信息,你也可以进一步导入css和JavaScript,就像通常用html-webpack-plugin做的那样。