怎么向html中加入插件,webpack4系列教程，如何引入html模板插件？

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

在本文中，苏南大叔描述webpack@4.0的基本使用。上一篇文字中，苏南大叔描述的是对.js文件的处理。但是，大家都知道：对于传统的前端项目来说，孤立的.js文件，是不能使用的。必须加载到在一个html文件里面，才能正式生效。

webpack4系列教程，如何引入html模板插件？(图1-1)

但是，默认情况下，webpack是不处理html的，所以，需要在html里面，手动插入/dist/banndle.js文件。那么，如何解决这个问题呢？这就是本文中，苏南大叔要主要阐述的问题。本文测试环境：mac、node@14.2.0、npm@6.14.4、webpack@4.43.0、html-webpack-plugin@4.3.0。

插件html-webpack-plugin

这里为了一个.js文件，引入了html模板的概念。并且js文件和html模板文件，可以是一一对应的关系，也可以是多对一，或一对多的关系，这个是可以配置的。同时，这个html模板，也具有获得webpack传递的参数的能力。当然，你可以就把它当成普通的页面，当然也可以赋予它一定的获取参数的能力。随你的心意。

这里需要为webpack安装html-webpack-plugin插件：npm install html-webpack-plugin -D

配置插件html-webpack-plugin

当然还是修改webpack.config.js这个配置文件，下面的代码是个范例：const path = require("path");

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

mode: 'production', // 环境

entry: {

app: './src/index.js',

main: './src/main.js'

},

output: {

filename: '[name].js',

path: path.resolve(__dirname, 'dist2')

},

plugins: [

new HtmlWebpackPlugin({

template:"./html/index.html", // 根据 目标文件生成 html

title: 'title参数',

showErrors: true,

inject: 'body',

}),

new HtmlWebpackPlugin({

filename: 'test2.html',

template: './html/test.html',

excludeChunks: ['app']

inject: 'head',

}),

new HtmlWebpackPlugin({

filename: 'test3.html',

template: './html/test.html',

chunks: ['app', 'main']

}),

],

}

这个html-webpack-plugin插件，在提供html模板的同时，还可以把生成的.js文件自动插入到dist目录下面的html文件中。

html-webpack-plugin参数注意事项有一个新的html模板需要生成到dist目录下面的话，就要配置一个新的new HtmlWebpackPlugin()。所以，一般来说，多个html，就配置多个new HtmlWebpackPlugin()即可。

同一个html模板，在dist目录下面，对应多个html文件的情况，是通过变换filename参数来解决的。

插入某个.js，或者不插入某个.js，或者默认插入所有.js文件，都是通过excludeChunks和chunks来控制的。这两个参数都是数组。数组的成员就是entry中定义的key。

插入.js文件的位置，一般来说是放在body的底部。但是你也可以换到head里面。虽然不推荐这么使用。参数inject，是用于控制这个插入位置的。控制插入到head区域的话，就配置：inject:'head'。

相关链接

总结

本文中说的是html-webpack-plugin插件，最终的效果就是：在生成.js文件的同时，也生成了对应的.html文件，并且html文件中，已经自动插入了.js文件的引用。更多webpack的使用技巧，欢迎点击下面的链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。