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

2024-02-16 21:14:52

如果我们需要在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()
        })
    ]
}

原文档引用链接

码农公寓

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

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

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

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

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

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

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

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

相关文章

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