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

苏南大叔:webpack4系列教程,如何引入html模板插件? - webpack-plugin-html
webpack4系列教程,如何引入html模板插件?(图1-1)

但是,默认情况下,webpack是不处理html的,所以,需要在html里面,手动插入/dist/banndle.js文件。那么,如何解决这个问题呢?这就是本文中,苏南大叔要主要阐述的问题。本文测试环境:macnode@14.2.0npm@6.14.4webpack@4.43.0html-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文件,都是通过excludeChunkschunks来控制的。这两个参数都是数组。数组的成员就是entry中定义的key
  • 插入.js文件的位置,一般来说是放在body的底部。但是你也可以换到head里面。虽然不推荐这么使用。参数inject,是用于控制这个插入位置的。控制插入到head区域的话,就配置:inject:'head'

相关链接

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: