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

  <!-- 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标签  并且引入正确的路径

猜你喜欢

转载自www.cnblogs.com/IwishIcould/p/11432606.html