ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2022-01-24 16:02:17  阅读：189  来源： 互联网

标签：index js webpack html 自动化 根目录 打包 页面


自动化生成项目中的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

3、查看生成的dist/下的index-25659dd78be926614658.html文件，看到webpack is good说明打包 成功！

4.那是不是任意的参数都能被模板接收呢？我们在webpack.config.js文件里面加入这行代码：data:new Date()

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',
            template:'index.html',   //传一个模板，就是根目录下的index.html
            inject:'head',
            title:'webpack is good',  //这个是传递的参数
            date:new Date()  //这个也是传递的参数
        })
    ]
}

接下来在根目录模板index.html中引入属性
根目录index.html代码如下：

<!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>
  	<!-- 接收参数 -->
  	title：<%=htmlWebpackPlugin.options.title %>
  	<!-- 接收参数 -->
    日期：<%= htmlWebpackPlugin.options.date %>
    
  </body>
</html>

运行webpack：
显示如下：
在这里插入图片描述
说明打包成功！

5、到底我们究竟能在这个htmlWebpackPlugin取到哪些信息呢？我们可以遍历，

在根目录模板index.html下面增加如下代码：

<% for (var key in htmlWebpackPlugin){ %>
   <%= key  %>
<% } %>

根目录模板index.html代码如下：

<!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>
    <!-- 注意这里的等号代表输出 -->
    <%= htmlWebpackPlugin.options.date %>

    <!-- 遍历htmlWebpackPlugin -->
    <% for (var key in htmlWebpackPlugin){ %>
      <%= key  %>
    <% } %>
  </body>
</html>

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.html',
            template:'index.html',   //传一个模板，就是根目录下的index.html
            inject:'head',
            title:'webpack is good',             //这个是传递的参数
            date:new Date()
        })
    ]
}

运行：webpack

效果截图如下：
在这里插入图片描述
发现有2个key，一个是files，一个是options

6、然后我们再对files和options进行遍历

根目录模板index.html代码如下：

<!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>
    <!-- 注意这里的等号代表输出 -->
    <%= htmlWebpackPlugin.options.date %>

    <!-- 遍历htmlWebpackPlugin.files -->
    <% for (var key in htmlWebpackPlugin.files){ %>
      <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
    <% } %>

    <!-- 遍历htmlWebpackPlugin.options -->
    <% for (var key in htmlWebpackPlugin.options){ %>
      <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
    <% } %>
  </body>
</html>

运行webpack：

效果如下：dist/js/index.html打包后生成的文件代码如下：

	<!-- 遍历htmlWebpackPlugin.files -->

      publicPath : ""

      chunks : {"main":{"size":23,"entry":"js/main-df735bd75d7abb5252d2.js","hash":"df735bd75d7abb5252d2","css":[]},"a":{"size":31,"entry":"js/a-58f74356e0c5391b7a38.js","hash":"58f74356e0c5391b7a38","css":[]}}

      js : ["js/main-df735bd75d7abb5252d2.js","js/a-58f74356e0c5391b7a38.js"]

      css : []

      manifest : 


    <!-- 遍历htmlWebpackPlugin.options -->

      template : "C:\\Users\\I love ljj\\Desktop\\webpackDemo\\node_modules\\_html-webpack-plugin@2.30.1@html-webpack-plugin\\lib\\loader.js!C:\\Users\\I love ljj\\Desktop\\webpackDemo\\index.html"

      filename : "index.html"

      hash : false

      inject : "head"

      compile : true

      favicon : false

      minify : false

      cache : true

      showErrors : true

      chunks : "all"

      excludeChunks : []

      title : "webpack is good"

      xhtml : false

      date : "2017-10-29T07:16:17.048Z"

7、比如我们的需求再复杂些，让打包之后的js文件一部分在head标签中，一部分在body标签中。

文档地址

webpack.config.js代码如下：
可以在plugins传递参数：inject:false,，在根目录模板index.htm的head和body标签中加入分配好src的script标签。htmlWebpackPlugin.files.chunks.a.entry ——>
src="<%= htmlWebpackPlugin.files.chunks.entry的名字 .entry %>"
比如：src="<%= htmlWebpackPlugin.files.chunks.main.entry %>

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.html',
            template:'index.html',   //传一个模板，就是根目录下的index.html
            inject:false,
            title:'webpack is good', //这个是传递的参数
            date:new Date()
        })
    ]
}

在根目录模板index.html中的head标签中加入这行代码：<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"> </script>

<script type="text/javascript" src="<%= 
    htmlWebpackPlugin.files.chunks.main.entry %>">
</script>

在根目录模板index.html中的body标签中加入这行代码：<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"> </script>

<script type="text/javascript" src="<%= 
    htmlWebpackPlugin.files.chunks.a.entry %>">
</script>

打包后截图效果如下：
在这里插入图片描述

8、如果我们打包之后需要上线怎么办

显然上线后的地址跟本地的相对路径显示是不一样是，那怎么办呢？
其实我们可以在output中加入一行代码：publicPath:'http://cdn.com/'，注意这里的 http://cdn.com/ 地址需要改成你自己的地址

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',            //打包后的文件名
        publicPath:'http://cdn.com/'
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意传的参数是一个对象
            filename:'index.html',
            template:'index.html',   //传一个模板，就是根目录下的index.html
            inject:false,
            title:'webpack is good',             //这个是传递的参数
            date:new Date()
        })
    ]
}

原文档引用链接

标签：index,js,webpack,html,自动化,根目录,打包,页面
来源： https://blog.csdn.net/weixin_46392266/article/details/122111885

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有