[英]Webpack doesn't rendering html partials in another html partial
I'm trying to import static html components in my templates,我正在尝试在我的模板中导入 static html 组件,
I've this structure:我有这个结构:
/src/home.html.ejs
/src/parts/header.html
/src/parts/breadcrumbs.html
/src/home.html.ejs body /src/home.html.ejs 正文
<%= require('./header.html') %>
/src/parts/header.html /src/parts/header.html
<h1>Title</h1>
<%= require('./breadcrumbs.html') %>
/src/parts/breadcrumbs.html /src/parts/breadcrumbs.html
It's a breadcrumb!
When webpack is building I'm getting this in index.html:当 webpack 正在构建时,我在 index.html 中得到了这个:
<h1>Title</h1>
<%= require('./breadcrumbs.html') %>
Webpack config: Webpack 配置:
const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
publicPath: '',
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(s*)css$/,
use: [
miniCss.loader,
'css-loader',
'sass-loader',
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
],
}
]
},
plugins: [
new miniCss({
filename: 'style.css',
}),
new HtmlWebpackPlugin({
title: 'Home',
template: path.resolve(__dirname, './src/home.html.ejs'),
filename: 'index.html',
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
Also I found a couple of solutions when devs can use option interpolate in html-loader, but I'm using html-loader higher then v0.5.5 and this option was removed当开发人员可以在 html-loader 中使用选项 interpolate 时,我还找到了一些解决方案,但是我使用的 html-loader 高于 v0.5.5,并且此选项已被删除
What I'm doing incorrectly?我做错了什么?
I figured it out by using ejs-webpack-loader:我通过使用 ejs-webpack-loader 解决了这个问题:
npm i ejs-webpack-loader
webpack.config.js webpack.config.js
const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
publicPath: '',
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.ejs$/,
use: [
{
loader: "ejs-webpack-loader",
}
]
},
{
test: /\.(s*)css$/,
use: [
miniCss.loader,
'css-loader',
'sass-loader',
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
],
}
]
},
plugins: [
new miniCss({
filename: 'style.css',
}),
new HtmlWebpackPlugin({
title: 'Home',
template: path.resolve(__dirname, './src/home.html'),
filename: 'index.html',
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
Structure结构
/src/home.html
/src/parts/header.ejs
/src/parts/breadcrumbs.ejs
in home.html在家里。html
<%= require('./parts/header.ejs')() %>
in header.ejs在 header.ejs
<%- require('./breadcrumbs.ejs')() %>
import child components with <%- not <%= and use brackets () in the end of import.使用<%-而不是<%=导入子组件,并在导入结束时使用方括号 ()。 You can pass some variables inside this brackets
您可以在这个括号内传递一些变量
in breadcrumbs.ejs在面包屑.ejs
It's a breadcrumb!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.