7 html-webpack-plugin的两个基本作用

html-webpack-plugin的作用:
1.在内存中根据我们的index模板页面,生成一个内存里面的首页
2.当使用html-webpack-plugin之后,我们不再需要手动处理bundle.js的引用路径了,
因为这个插件,已经帮我们自动创建了一个合适的script,并且,引用了正确的路径
简要概述两个作用:
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到页面中去

运行 cnpm i html-webpack-plugin -D 安装到开发依赖

//第1步
// 导入内存中生成HTML页面的插件
// 只有是插件,都一定要放到Plugins节点中去
const htmlWebpackPlugin=require('html-webpack-plugin')
//第2步
 new htmlWebpackPlugin({//创建一个在内存中 生成HTML页面的插件
        template:path.join(__dirname,'/src/index.html'),//指定 模板页面,将来会根据指定的页面路径,去生成内存中的页面
        filename:'index.html' //指定生成的页面的名称
       })

猜你喜欢

转载自www.cnblogs.com/songsongblue/p/11875614.html