首页 > Web开发 > 详细

06webpack-- html-webpack-plugin的2个作用

时间:2019-08-29 23:47:36      阅读:109      评论:0      收藏:0      [点我收藏+]
  <!-- 15  html-webpack-plugin的2个作用
     下载 cnpm i html-webpack-plugin -D   作用在==>内存中生成页面

     在webpack中 导入在内存中生成的HTML页面的插件
     // 只要是webpack的插件 都要放入 plugins 这个数组中去
     const htmlwebpackPlugin=require("html-webpack-plugin")
     

    plugins: [
    new webpack.HotModuleReplacementPlugin(), //这是热跟新的配置

    new htmlwebpackPlugin({ //创建一个 在内存中生成 HTML页面的插件
        template:path.join(__dirname,‘./src/index.html‘), //指定模板页面,将来会根据指定的页面路径,去生成内存中的 页面
        filename:"index.html" //指定生成的页面名称
    })
    ]
  
    //

    当我们使用html-webpack-plugin之后,我们不需要手动处理bundle.js的引用路径,
    (我们可以将index.html中的 <script src="../dist/bundle.js"></script>注释掉 )
     因为这个插件,已经帮我们自动创建一个 合适的script,, 并且引用了正确的路径 
     
     这个插件有两个作用的
     在内存中帮我们生成一个页面
     帮我们自动创建一个合适的script标签  并且引入正确的路径

 

06webpack-- html-webpack-plugin的2个作用

原文:https://www.cnblogs.com/IwishIcould/p/11432606.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!