Can webpack connect the html module directly in html without introducing a template engine?

recently trying to use webpack to build a project, ask which library can implement the function of referencing the html module in the line of the html file?

at present, all I know is that the webpack template engine can do this kind of stitching. Can I write it directly into html?

Thank you!

for example:

a.html

<div class="blue-box">blue</div>

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center</title>
</head>
<body>
    // a.html
    <div class="red-box">red</div>
</body>
</html>

result:

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center</title>
</head>
<body>
    <div class="blue-box">blue</div>
    <div class="red-box">red</div>
</body>
</html>

Html webpack

Mar.09,2021

Yes, read and write the file directly with node, and write the contents of a.html into main.html. Even webpack does not need

you can use webpack's html-webpack-plugin to cooperate with the template engine to assemble and generate html files. Specifically, see these two articles: " webpack multi-page application architecture series (12): using webpack to generate HTML ordinary web pages & page template " "webpack multi-page application architecture series (13): build a simple template layout system"

html-loader

landlord, How did you solve this problem? Ask for advice

you can use raw-loader

template html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    ${require('raw-loader!./a.tpl.html')}
    ${require('raw-loader!./b.tpl.html')}
    <div><h1>this is "index.html" own content</h1></div>
</body>
</html>

webpack configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './web/src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]-[hash].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
        title: 'inline_html',
        minify: false,
      loader: "raw-loader",
      template: 'web/src/index.html'
    })
  ]
};

generated code html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div><h1>this is "a.tpl.html" file content</h1></div>
    <div><h1>this is "b.tpl.html" file content</h1></div>
    <div><h1>this is "index.html" own content</h1></div>
    <script type="text/javascript" src="main-b173a8766c84b7b7e5b1.js"></script>
</body>
</html>

directory structure

Previous: The map loop is nested, always getting the last value of the outer array

Next: How to plan the schedule and process in the development of the program project?

Vue-cli introduces third-party non-modular js
beginners, initialize the project with vue-cli and webpack, now want to introduce a non-modular js file, this file has the following characteristics: wants to make global references, such as the js file in the css library there is no need to modi...

Html webpack vue-cli vue.js javascript

Mar.07,2021
The problem of loading image resources in webpack4.0 html and css
when packaging files with webpack, it is found that the application path is always misaligned, and the reference to img in html and css always goes wrong. this is the entire file directory structure html css webpack.config.js The path to the img...

Css html webpack

Mar.29,2021
How does webpack handle pictures in html?
because pictures are preloaded in js , the pictures in HTML use data-src instead of src . I found that url-loader didn t process these pictures, and then I used html-loader and didn t process them either. { test: .(png|jpe?g|gif|sv...

Html webpack

Mar.31,2021
There is no images folder in the dist directory after webpack is packaged?
Vision "webpack": "^3.10.0", "webpack-dev-server": "^2.9.5" File structure (before packing): webpack.config.js const path = require( path ); const webpack = require( webpack ); const HtmlWebpackPlugin =...

Front-end-engineering html webpack javascript

Jul.09,2021

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3a559-2c211.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3a559-2c211.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?