我正在尝试从我的 webpack 项目中的 pug 模板输出单个 html 文件。我遇到的问题是pug-loader
将html渲染到文件中。
我的 webpack.config:
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const src = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');
module.exports = {
context: src,
entry: {
pug: glob.sync('./**/*.pug', {
cwd: src
}),
index: path.resolve(src, 'index.js')
},
output: {
path: dist,
filename: '[name].js'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015'].map(dep =>
require.resolve(`babel-preset-${dep}`)
) // Fix for lerna symlinked deps
}
}
},
{
test: /\.pug$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].html'
}
},
'extract-loader',
'html-loader',
'apply-loader',
'pug-loader'
]
}
]
}
};
这会为我的项目中的每个 pug 模板正确生成文件,但这些文件不包含 html。相反,每个文件看起来像:
var req = require("!!<absolute-path-to-project>/node_modules/pug-loader/index.js!<absolute-path-to-pug-file>/index.pug");
module.exports = (req['default'] || req).apply(req, [])
我安装的依赖版本:
{
"apply-loader": "^2.0.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"extract-loader": "^0.1.0",
"file-loader": "^0.11.1",
"glob": "^7.1.2",
"html-loader": "^0.4.5",
"pug-loader": "^2.3.0",
"webpack": "^3.0.0"
}