我使用文件加载器自动渲染一堆pug模板到静态html文件,但webpack也输出一个基于入口点的无意义文件
例如,这是在我的webpack.config.js中:
entry: {
'js/build/bundle.js': './js/app.js',
'this-shouldnt-emit': './pug/.pug.js' //pug entry point
},
output: {
path: path.join(__dirname, '../'),
filename: '[name]'
},
...
// pug loading module rule
{
test: /\.pug$/,
include: path.resolve(__dirname, "../pug"),
use: [
"file-loader?name=[path][name].html&context=./pug",
"pug-html-loader?pretty&exports=false"
]
}
我this-shouldnt-emit在根构建目录中得到一个捆绑文件,我不想要.
如何阻止文件加载器发出输出包,但不干扰它生成当前所有的静态html文件.是否有一个插件或某种类型的null加载器,我可以放在加载器链的末尾来杀死束发射？
我使用webpack pug-html-loader + file-loader来生成一堆静态pug模板.
我也想开始添加散列包文件名,但我无法弄清楚如何将散列文件名插入到我所有的哈巴狗模板中
这是我在所有pug模板中当前引用我的包的方式:
script(src="bundle.js")
link(href="bundle.css")
如何修改它来引用bundle-[chunkhash].js/ bundle-[chunkhash].css]- 我是否需要将一些变量传递给我的webpack.config.js中的pug-html-loader？
注意我使用extract-text-plugin将我的SASS输出到.css包文件
我正在使用webpack v4，并且尝试Pug与之一起使用，webpack-dev-server但运行webpack-dev-server --mode development时不提供已编译状态Pug。请帮忙。我不知道该怎么办。谢谢你的答复。这是我的配置：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/main.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.pug$/,
use: {
loader: 'pug-loader',
options: {
pretty: true
}
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
hot: true,
open: true,
progress: true
},
plugins: [
new HtmlWebpackPlugin({ …是否可以将变量传递给我之前在“html-webpack-plugin”中定义的“pug-html-loader”加载的 .pug 模板？
webpack.config.babel.js
...
{
test: /\.pug$/,
use: [
{
loader: 'html-loader'
},
{
loader: 'pug-html-loader',
options: {
self: true
}
}]
}
...
plugins: [
new HtmlWebpackPlugin({
chunks: ['index'],
filename: 'index.html',
template: './src/templates/layout.pug',
title: 'Welcome',
file: 'index'
}),
new HtmlWebpackPlugin({
chunks: ['index', 'contact'],
filename: 'contact.html',
template: './src/templates/layout.pug',
title: 'Contact us',
file: 'contact'
}),
]在layout.html 中，我定义如下：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<main>
${ …常规设置
我建立一个小的网站的WebPack和哈巴狗在此基础上真棒样板： https://github.com/alexnoz/webpack-pug-scss-boilerplate.git
该项目已启动并正在运行，我能够正确渲染哈巴狗文件。
需求
现在，在所有webpack编译发生之前，我需要加载一些数据。我想按照此回答的问题将数据传递给pug-html-loader 。
问题/疑问
我的问题是，我必须异步加载该数据。所以我有一个承诺。如何确保在完成webpack编译之前完成了诺言？
这是我目前无法使用的方法
// in webpack.config.js
var myData = []
loadSomeDataAsync().then(loadedData => myData = loadedData)
{
loader: 'pug-html-loader',
options: {
data: myData // <====
}
}
pug-html-loader接受options.data如果我把静态数据存在，那么这个数据是可用的哈巴狗模板中。
我知道我的问题似乎是，在Webpack编译发生之前，我的Promise尚未解决。但是如何使Webpack以某种方式“等待” Promise解决呢？
我已经尝试注册webpack事件挂钩。但是没有成功。还有其他建议吗？
我正在使用 vue 单文件组件，并将标记和逻辑分别分离到.pug文件中.ts。如果您对我不统一的原因感兴趣，请参阅评论部分。
import template from "@UI_Framework/Components/Controls/InputFields/InputField.vue.pug";
import { Component, Vue } from "vue-property-decorator";
console.log(template);
@Component({
template,
components: {
CompoundControlBase
}
})
export default class InputField extends Vue {
// ...
}
在开发构建模式下导出的模板是正确的（为了可读性我对其进行了美化）：
import template from "@UI_Framework/Components/Controls/InputFields/InputField.vue.pug";
import { Component, Vue } from "vue-property-decorator";
console.log(template);
@Component({
template,
components: {
CompoundControlBase
}
})
export default class InputField extends Vue {
// ...
}
在生产模式下，我的标记已小写。所以，console.log(template)输出：
<CompoundControlBase
:required="required"
:displayInputIsRequiredBadge="displayInputIsRequiredBadge"
<TextareaAutosize
v-if="multiline"
:value="value"
/><TextareaAutosize>
</CompoundControlBase> …我有一个网站，主要是用 pug（html 预处理器）编写的。我使用 output.publicPath 等于 '/' 所以我可以在开发模式下运行 webpack 并轻松工作，将项目文件夹视为根文件夹，但每个 href、src 和 url 都是绝对路径。当我构建项目时，我想通过在乞讨中添加一些节点（例如让我们使用'/path/to/'）来更改每条路径。例如，我有一个图像
img(src="/img/image.jpg")
在我构建这个项目之后，我想收到这个：
img(src="/img/image.jpg")
并接收相同的 href 和 url。
我做了一个 webpack 构建配置并将 output.publicPath 设置为 '/path/to/' 但它更改了链接的 css 和 js 文件的路径：
<img src="/path/to/img/image.jpg">
我很高兴收到任何解决方案、想法或建议。