自动化生成项目中的html页面(中)

艾文达

已于 2022-01-26 09:55:03 修改

阅读量583

点赞数 1

文章标签： html 自动化 webpack

于 2022-01-24 15:50:37 首次发布

本文链接：https://blog.csdn.net/weixin_46392266/article/details/122111885

版权

这篇博客详细介绍了如何使用html-webpack-plugin在webpack配置中传递参数，动态生成html文件，并探讨了如何处理复杂的js文件引入位置问题以及打包上线后的路径调整。通过实例展示了在webpack配置文件中设置htmlWebpackPlugin，以及在模板文件中接收和使用这些参数的方法。

摘要由CSDN通过智能技术生成

自动化生成项目中的html页面(上)

如果我们需要在html-webpack-plugin插件中传参数，在模板中根目录下的index.html模板中引用怎么办？

我们可以在webpack.config.js文件中写入这么一行代码：title:'webpack is good'
webpack.config.js代码如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   

    entry:{
                                //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{
       
        path:__dirname + '/dist',    //打包后的文件路径
        filename:'js/[name]-[chunkhash].js'            //打包后的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
   
            //注意传的参数是一个对象
            filename:'index-[hash].html',  //打包好的html名称
            template:'index.html',   //传一个模板，就是根目录下的index.html
            inject:'head', // script标签的插入位置
            title:'webpack is good' //这个是传递的参数
        })
    ]
}

然后我们通过模板获取到参数，那我们应该怎么做呢？
修改根目录下index.html代码如下：
添加代码：（用来接收参数：）<title><%=htmlWebpackPlugin.options.title %></title>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <!-- 接收参数 -->
    <title><%=htmlWebpackPlugin.options.title %></title>
    
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

接收参数就用这行代码来实现：<%=htmlWebpackPlugin.options.title %>

2、然后在终端输入npm run webpack

最低0.47元/天解锁文章

艾文达

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
自动化生成项目中的html页面(中)

接webpack - 自动化生成项目中的html页面(上)如果我们需要在html-webpack-plugin插件中传参数，在模板中根目录下的index.html模板中引用怎么办？我们可以在webpack.config.js文件中写入这么一行代码：title:'webpack is good'webpack.config.js代码如下：var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = { en
复制链接

扫一扫