账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack可以不引入模板引擎,直接在html里内连html模块吗?
    40
    0

    最近在尝试使用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>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 是的,可以使用Webpack将HTML模板与HTML模块直接合并到一个单独的文件中。这样,就可以在HTML中使用这些模板,而不需要引入任何模板引擎。

      要实现这一点,可以使用webpack的模板插件。例如,你可以使用html-webpack-plugin插件来插入HTML模板。这个插件可以在模板文件中插入模板元素,然后在输出文件中合并这些元素。

      以下是一个简单的例子:

      ```javascript const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin');

      module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /.html$/, use: [ htmlWebpackPlugin孽害 ] } ] }, plugins: [ htmlWebpackPlugin孽害 ] }; ```

      在这个例子中,我们使用了htmlWebpackPlugin孽害插件来插入HTML模板。这个插件会在模板文件中插入模板元素,然后在输出文件中合并这些元素。

      然后,你可以在HTML文件中直接引用这个模板,而不需要使用模板引擎。例如:

      ```html

      Webpack Example

      ```

      在这个例子中,我们没有使用任何模板引擎,而是直接引用了bundle.js文件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部