webpack4系列教程，如何引入html模板插件？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

但是，默认情况下，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'。

相关链接

• 《webpack4系列实用教程，如何搭建基本环境？》https://newsn.net/say/webpack-start.html
• 《如何利用webpack构建pdfjs加载pdf文件》 https://newsn.net/say/pdfjs-demo-webpack.html
• 《webpack、babel与react的那些事之一》https://newsn.net/say/webpack-babel-react-1.html
• 《webpack、babel与react的那些事之二》https://newsn.net/say/webpack-babel-react-2.html

总结

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

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。