问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

webpack可以不引入模板引擎，直接在html里内连html模块吗？

头像
CharXu
    6511220
    头像
    Jenny
      84921212

      最近在尝试使用webpack构建工程，求问哪个库可以实现html文件行内引用html模块的功能？

      目前我只知道webpack配合模板引擎可以进行这种拼接，可以直接写到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>

      结果：

      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>
      webpackhtml
      阅读 13.5k
      5 个回答
      得票最新
      头像
      jayzou
        2.8k119

        可以，直接用node读写文件，将a.html的内容写入main.html里面，连webpack都可以不要

        头像
        array_huang
          10.4k63248
          头像
          ouou
            8.7k2718
            头像
            gang
              51
              新手上路，请多包涵

              可以使用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>

              目录结构

              图片描述

              查看全部 5 个回答
              推荐问题
              宣传栏