Làm thế nào để sử dụng webpack để concat html miếng?

Ví dụ, tôi có một chính tập tin nhập html:Làm thế nào để sử dụng webpack để concat html miếng?

<div> 
    <!-- I'd like to include a html partial here --> 
</div>

Và tôi có một html phần

<span>I'm a partial html piece</span>

Tôi hy vọng rằng tôi có thể sử dụng webpack để tạo ra một html thức như dưới đây:

<div> 
    <span>I'm a partial html piece</span> 
</div>

Có thể thực hiện việc này với plugin/trình tải gói webpack không?

Nguồn

2016-03-25 Chris

Có một vài bộ tải để đạt được điều này: https://webpack.github.io/docs/list-of-loaders.html#templating

Ví dụ:

html-loader

<div>${require('./partials/gallery.html')}</div>

ejs-html-loader

<% include some/file %>

Nguồn

2016-03-25 08:26:35

Tôi có cùng một vấn đề và khi tôi sử dụng

${require('./partials/gallery.html')}

yêu cầu không giải thích –

Tôi không thể làm việc này, bạn có thể đưa ra ví dụ làm việc không? – Ruby

không có tác phẩm nào ở trên –

Bạn có thể sử dụng plugin này github.com/bazilio91/ejs-compiled-loader:

{ test: /\.ejs$/, use: 'ejs-compiled-loader' }

Thay đổi .html tập tin của bạn trong .ejs và bạn HtmlWebpackPlugin để trỏ đến quyền .ejs mẫu:

new HtmlWebpackPlugin({ 
    template: 'src/views/index.ejs', 
    filename: 'index.html', 
    title: 'Home', 
    chunks: ['index'] 
})

Bạn có thể nhập partials, các biến, và tài sản trong .ejs tệp:

src/views/partials/head.ejs:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <title><%= htmlWebpackPlugin.options.title %></title> 
</head>

src/js/ejs_variables.js:

const hello = 'Hello!'; 
const bye = 'Bye!'; 

export {hello, bye}

src/views/index.ejs:

<% include src/views/partials/head.ejs %> 
<body>  
    <h2><%= require("../js/ejs_variables.js").hello %></h2> 

    <img src=<%= require("../../assets/sample_image.jpg") %> /> 

    <h2><%= require("../js/ejs_variables.js").bye %></h2> 
</body>

Một lưu ý, khi bạn bao gồm một phần con đường phải được liên quan đến thư mục gốc của dự án của bạn.

Tôi đã trả lời cùng một câu hỏi tại đây stackoverflow.com/a/48750048/7448956.

Nguồn

2018-02-12 15:47:17 aaawww

Trong khi liên kết này có thể trả lời câu hỏi, tốt hơn nên bao gồm các phần thiết yếu của câu trả lời ở đây và cung cấp liên kết để tham khảo. Câu trả lời chỉ liên kết có thể trở thành không hợp lệ nếu trang được liên kết thay đổi. - [Từ đánh giá] (/ review/low-quality-posts/18799689) –

@ JannesBotis Cảm ơn, tôi đã chỉnh sửa câu trả lời. – aaawww

Làm thế nào để sử dụng webpack để concat html miếng?

Trả lời

Các vấn đề liên quan