如何在webpack中包含装载机？ [英] how to include loaders in webpack?
问题描述
我试图在索引内包含。因为我打算将这两个文件用于所有页面。由于我的研究webpack不允许导入文件，因此 Header.html 和 footer.html html的
<！ - ＃include file =header.html - - >
我在咕噜声中试过，我工作的很好。但在webpack中怎么做
这是我的webpack版本详情
name：webpack-boilerplate，
version：1.0.0，
这是我试过的...
在我的 webpack.config.js 文件中
{index.html 文件中的p $ p>
test：/\.html$/，
loader：'html-loader'
}
<身体GT;
require（html-loader！./ file.html）;
< div class =banner>
< h3>横幅1< / h3>
< / div>
< div class =banner banner2>
< h3>横幅2< / h3>
< / div>
< / body>
但它显示在页面
，这不是为了反应。这只适用于网站和普通的html ..
所以如何做到这一点？ / div> html-webpack-plugin支持模板化。
它并不是真正意味着要导入整个html部分，但是你可以这样做。
您可以在
webpack.config.js中定义变量new HtmlWebpackPlugin（{
template：'./src/index.html'，
header：'< h1> hello world< / h1> ;'，
}），
并将它们放在index.html中所以：
< html>
< head>
< / head>
< body>
<％= htmlWebpackPlugin.options.header％>
< / body>
< / html>
从常规html文件加载页眉和页脚更复杂。
返回一个Promise。
您需要加载异步文件，因此我们首先为webpack.config.js
module.exports = new Promise（（resolve）=> {
resolve（{
your config ...
}）;
}）;
接下来，我们要加载带节点的html文件。来自
fs的普通readFile函数可以处理回调函数，在这种情况下这没什么用处，所以我们将它转换为promisifyconst {promisify} = require（'util ）;
const fs = require（'fs'）;
const readFileAsync = promisify（fs.readFile）;
fs 和
util是默认的节点包，不需要使用npm来安装它们）
现在我们可以使用Promises和
module.exports = new Promise（（resolve ）=> {
const header = readFileAsync（__ dirname +'/header.html'）;
const footer = readFileAsync（__ dirname +'/footer.html'）;
Promise.all（[header，footer]）。then（（files）=> {
resolve（{
所有正常配置
插件：[
new HtmlWebpackPlugin（{
template：'./src/index.html'，
header：files [0]，
footer：files [1 ]，
}），
]，
}）;
}）
}）;
这很复杂，所以我可能会用不同的方法来获得你想要的，而不是使用的WebPack。但这是可能的。
I am trying to include
Header.htmland alsofooter.htmlinsideindex.html. Because I am going to use these two files as common for all the pages. As my research webpack is not allowing to import files as<!--#include file="header.html"-->I've tried in grunt i was working fine . But how to do in webpack
this is my webpack version details
"name": "webpack-boilerplate", "version": "1.0.0",here is what i tried... in my webpack.config.js file
{ test: /\.html$/, loader: 'html-loader' }in my index.html file
<body> require("html-loader!./file.html"); <div class="banner"> <h3>Banner 1</h3> </div> <div class="banner banner2"> <h3>Banner 2</h3> </div> </body>but its showing in page
and this not for react. This is only for website and normal html..
so how to do this?
解决方案html-webpack-plugin supports templating.
It is not really meant to import whole sections of html, but you can do that.You can define the variables in your
webpack.config.jsnew HtmlWebpackPlugin({ template: './src/index.html', header: '<h1>hello world</h1>', }),And put them in place in your index.html like so:
<html> <head> </head> <body> <%= htmlWebpackPlugin.options.header %> </body> </html>
To load the header and footer from normal html files is more complicated.
You need to load the files async, so we start by returning a Promise for thewebpack.config.jsmodule.exports = new Promise((resolve) => { resolve({ your config... }); });Next, we want to load the html files with node. The normal
readFilefunction fromfsworks with callbacks, which is not that useful in this case, so we convert it to a Promise withpromisifyconst { promisify } = require('util'); const fs = require('fs'); const readFileAsync = promisify(fs.readFile);(Both
fsandutilare default node packages. You don't have to install them with npm)Now that we can load files with Promises and webpack waits for the config with a promise, we just need to put them together.
module.exports = new Promise((resolve) => { const header = readFileAsync(__dirname + '/header.html'); const footer = readFileAsync(__dirname + '/footer.html'); Promise.all([ header, footer ]).then((files) => { resolve({ all of your normal config plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', header: files[0], footer: files[1], }), ], }); }) });This is quite complex, so I would probably look into different ways to get what you want, not using webpack. But it is possible.
这篇关于如何在webpack中包含装载机？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
