• webpack自动生成html


    1.怎么解决每次打包后的文件名都要记住再可使用的问题

      1.1首先要用到webpack的一个插件:nmp install html-webpack-plugin --save-dev

      1.2在webpack-config.js里引入对插件的引用

    2.怎么将输出的文件,输出到不同的目录下

     2.1首先改变path路径

     2.2其次改变filename路径  (详情见webpack.config.js) 

    3.传递参数

      3.1首先在plugins里配置参数(详情见webpack.config.js里的plugins的title(title为个人定义 的变量,如果想传多个参数可以定义title1 title2等等))

      3.2调用参数,在html的标签里

        <title><%= htmlWebpackPlugin.options.title%></title>

    4.遍历htmlWebpackPlugin对象里的值(不用于项目,只为学习)

      <%for(var key in htmlWebpackPlugin.files){%>

      <%=key%> :<%=JSON.stringify(htmlWebpackPlugin.files[key])%>

      <%}%>

      

      <%for(var key in htmlWebpackPlugin.options){%>

      <%=key%> :<%=JSON.stringify(htmlWebpackPlugin.options[key])%>

      <%}%>

    5. 想要将打包生成后的js文件的引入一部分放在head里,一部分放在body里。这时我们只能手动的写js代码来改变,配置是达不到的

      5.1首先在自己建的index.html的head标签里写如下代码将main生成的打包js引用放在head里

        <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry%>"></script>

      5.2在body里将 a生成的打包js应用放在body里

        <script type='text/javascript' src='<%=htmlWebpackPlugin.files.chunks.a.entry%>'></script>  

      5.3此时需要把webpack.config.js里的inject改为false,不然它会自动的将文件引入到head  

    6.打包后上线

      publicpath: //上线时,引用的打包后的绝对路径的地址将会变成publicpath对应的值

    7.对打包文件压缩

      minify

    8.多页面应用,只需要在plugins里,继续new就可以(详情见webpack.config.js),如果想要做到生成的html引用不同的文件,只需要在chunks里配置即可,但是此时需要把5中的js代码删除

    9.如果界面非常多,此时我们去一一的给界面指定使用的js会很麻烦,此时我们就要用excludeChunks它表示哪些js文件被排除在外

    10.直接将初始化的界面以内嵌的方式引入界面,在自己的引入模版(index.html)里写如下代码(head里写,将main.js以内嵌的方式引入)

      <script type="text/javascript">

        <%=compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>

      </script>

    11.公共方法的外连接引入文件的方式

    <%for(var k in htmlWebpackPlugin.files.chunks){%>

    <%if(k!=='main'){%>

    <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[k].entry%>"></script>

    <%}%>

    <%}%>

      

  • 相关阅读:
    Oracle存储过程
    eclipse使用小技巧
    A.N.T的使用
    Java中JDBC连接数据库(MySQL)
    SQL常用语句例子
    c/s&&b/s区别浅析
    ngRoute+ngAnimate与JQM中的页面跳转的区别
    jQueryMobile与AngularJS的区别
    jQueryMobile--栅格布局
    jQueryMobile--基础
  • 原文地址:https://www.cnblogs.com/cxdxm/p/6616612.html
Copyright © 2020-2023  润新知