浅析html webpack plugin软件的应用实例教程

应用html-webpack-plugin软件来起动网页页面 可将html网页页面放入运行内存 以提高网页页面的载入速率
而且还能全自动设定index.html网页页面中JS文档引进的相对路径

应用前提条件:新项目中安裝了Webpack应用流程:

流程1、在新项目的根文件目录下键入cnpm i html-webpack-plugin -D 将html-webpack-plugin软件安裝到开发设计依靠
其功效是依据特定的模版网页页面在运行内存中转化成相应的HTML网页页面

流程2、软件安裝以后 改动webpack.config.js的配备文档

在配备文档中导入html-webpack-plugin软件 并配备模版页相对路径和转化成的网页页面名字便可

const path=require("path")
// 导入html-webpack-plugin
const htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    // 配备软件连接点
    plugins:[
        // 建立html-webpack-plugin软件
        new htmlWebpackPlugin({ // 设定主要参数
            template:path.join(__dirname,"./src/index.html"), // 特定模版网页页面 以依据特定网页页面转化成运行内存中的网页页面
            filename:"index.html" // 特定转化成的运行内存中的网页页面的名字
        })
    ]
}

应用了html-webpack-plugin软件以后 就不用手动式解决bundle.js的引入相对路径了
由于 在转化成后的运行内存中的HTML网页页面里 早已全自动引进了bundle.js的正确相对路径

总结 - 软件的功效:

1、全自动依据特定的网页页面转化成1个在运行内存中的网页页面

2、全自动在网页页面中引进装包好的bundle.js

到此这篇有关浅析html webpack plugin软件的应用实例教程的文章内容就详细介绍到这了,更多有关html webpack plugin软件內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!