webpack可以不引入模板引擎，直接在html里內(nèi)連html模塊嗎？

最近在嘗試使用webpack構(gòu)建工程，求問哪個(gè)庫可以實(shí)現(xiàn)html文件行內(nèi)引用html模塊的功能？

目前我只知道webpack配合模板引擎可以進(jìn)行這種拼接，可以直接寫到html里嗎？

謝謝！

例如：

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>

結(jié)果：

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>

回答

編輯回答

網(wǎng)妓

html-loader

2017年5月11日 00:42

編輯回答

朕略傻

可以使用raw-loader

模板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配置

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'
    })
  ]
};

生成的代碼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>

目錄結(jié)構(gòu)

圖片描述