首页 / WEBPACK / [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4014字，纯文字阅读大概需要6分钟。

内容图文

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件，那么怎么把他们变成动态的index.html文件，这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢？，我们可以使用插件html-webpack-plugin，首先安装这个插件npm install html-webpack-plugin --save-dev，好的，接下来就开始用这个插件了

官方参考文档：

插件通用用法：https://webpack.js.org/configuration/plugins/#plugins

html-webpack-plugin插件用法：https://webpack.js.org/plugins/html-webpack-plugin/

html-webpack-plugin插件配置：https://github.com/jantimon/html-webpack-plugin#configuration

一、首先，我们需要在配置文件webpack.dev.config.js中，引入插件  

             1
            var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 module.exports = {
 3    entry : {
 4         main : ‘./src/js/main.js‘,
 5         calc : ‘./src/js/calc.js‘
 6    },
 7    output : {
 8//__dirname，就是当前webpack.config.js文件所在的绝对路径 9         path : __dirname + ‘/dist‘, //输出路径，要用绝对路径10         filename : ‘[name]-[hash].bundle.js‘ //打包之后输出的文件名11    },
12     plugins: [new HtmlWebpackPlugin()]
13 };

 然后执行npm run d打包命令，就能在dist目录下动态生成index.html文件，而且引入了2个动态打包生成的js文件，这个时候刷新index.html文件，就能看到js函数执行的结果了

技术分享

二、但是，这个在dist目录下面新生成的html文件，跟我们的项目目录(demo2)下面的index.html文件并没有任何关联， 显然不符合实际的项目需求，那我们想要的结果应该是根据demo2下面的index.html这个文件，为模板生成dist目录下面的index.html文件，这样就把两个文件建立起了关联，我们只需要在配置文件webpack.dev.config.js中，给html-webpack-plugin的构造函数传入template模板即可

             1
            var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 module.exports = {
 3    entry : {
 4         main : ‘./src/js/main.js‘,
 5         calc : ‘./src/js/calc.js‘
 6    },
 7    output : {
 8//__dirname，就是当前webpack.config.js文件所在的绝对路径 9         path : __dirname + ‘/dist‘, //输出路径，要用绝对路径10         filename : ‘[name]-[hash].bundle.js‘ //打包之后输出的文件名11    },
12     plugins: [new HtmlWebpackPlugin(
13        {
14             template : ‘./index.html‘
15        }
16    )]
17 };

template:就是以demo目录下的这个index.html文件为模板生成dist/index.html文件，然后执行npm run d打包命令就能重新生成了

技术分享

三、但是还有个小问题，我们上面打包生成的index.html文件和js文件是在同一个目录，在大型项目里面管理肯定很混乱，我们希望生成的.html文件和js文件分开存放，我们可以在webpack.dev.config.js文件中的filename配置中，加一个目录js（js文件放在这个目录下面），把他们分开就可以了，配置完了，不要忘记执行打包命令(npm run d)

             1
            var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 module.exports = {
 3    entry : {
 4         main : ‘./src/js/main.js‘,
 5         calc : ‘./src/js/calc.js‘
 6    },
 7    output : {
 8//__dirname，就是当前webpack.config.js文件所在的绝对路径 9         path : __dirname + ‘/dist‘, //输出路径，要用绝对路径10         filename : ‘js/[name]-[hash].bundle.js‘ //打包之后输出的文件名11    },
12     plugins: [new HtmlWebpackPlugin(
13        {
14             template : ‘./index.html‘
15        }
16    )]
17 };

技术分享

四、插件的配置选项：inject与filename

webpack.dev.config.js配置文件:

             1
            var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 module.exports = {
 3    entry : {
 4         main : ‘./src/js/main.js‘,
 5         calc : ‘./src/js/calc.js‘
 6    },
 7    output : {
 8//__dirname，就是当前webpack.config.js文件所在的绝对路径 9         path : __dirname + ‘/dist‘, //输出路径，要用绝对路径10         filename : ‘js/[name]-[hash].bundle.js‘ //打包之后输出的文件名11    },
12     plugins: [new HtmlWebpackPlugin(
13        {
14             template : ‘./index.html‘,
15             filename : ‘index-[hash].html‘,
16             inject : ‘head‘
17        }
18    )]
19 };

filename：打包生成的文件名，还可以加目录，默认没有写的时候是index.html

inject：有4个值: true | ‘head‘ | ‘body‘ | false

如果设置为head, 就是把js引入放在head标签里面, 如果设置为body，就是把js引入放在body里面， false: 不会引入js文件  true:引入js文件

五、插件的选项：title

title: 模板的标题

webpack.dev.config.js配置文件代码:

             1
            var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 module.exports = {
 3    entry : {
 4         main : ‘./src/js/main.js‘,
 5         calc : ‘./src/js/calc.js‘
 6    },
 7    output : {
 8//__dirname，就是当前webpack.config.js文件所在的绝对路径 9         path : __dirname + ‘/dist‘, //输出路径，要用绝对路径10         filename : ‘js/[name]-[hash].bundle.js‘ //打包之后输出的文件名11    },
12    plugins: [
13new HtmlWebpackPlugin({
14             template : ‘./index.html‘,
15             title : ‘ghostwu教你学webpack‘,
16             inject : true17        })
18    ]
19 };

然后，在demo2目录下面的index.html文件中用ejs模板语法引入title

             1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title><%= htmlWebpackPlugin.options.title %></title>
 8 </head>
 9 <body>
10 </body>
11 </html>

注意是：htmlWebpackPlugin.options.title，不要把html的h大写， 千万注意，我在这里踩了好久的坑

 

原文：http://www.cnblogs.com/ghostwu/p/7500289.html

内容总结

以上是互联网集市为您收集整理的[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)全部内容，希望文章能够帮你解决[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1112431.html

来源：【匿名】