三、自动化生成项目中的html页面

 1. 现在项目下已经有了初始页面，页面引用的是bundle.js,但是我们打包后的文件名是不确定的(带hash等)，有什么办法能自动改变路径？借助插件;

 2. 安装npm install html-webpack-plugin –save-dev;

 3. 配置文件中引用

　　官网=>using Plugins

　　

　　初始化插件，运行 npm run webpack ;发现插件生效;生成了html文件，并且对两个js进行了引用；但是这个跟我们根目录下的html文件没有什么关系，或者说怎样以根目录下的html为模板来生成这个html?

 4. 给插件传参；传一个模板；

　　 

　　路径：为什么能确定这个index.html是模板html => 上下文概念；在配置里有一个context属性（默认根目录）

　　在运行npm run webpack ；发现生成的html具有模板的内容，还引入了打包生成的文件；试着改变模板；运行npm run webpack；生成的html也改变了。

 5. 现在有一个问题？生成的所有文件都在同一个文件夹，不符合开发模式

　 

       因为我们output 的path 就是指向同一个文件夹；修改path

      

6.html-webpack-plugin的其他参数

      

7.怎样在配置文件传参，然后在模板引用；

　　使用js模板语言=> ejs语法 <%= htmlWebpackPlugin.options.title %>

　　 

　　

　　Npm run webpack;

     是否任何一个变量都能传到页面呢？

      

　　

　　Npm run webpack

 　　

       这样我们可以很轻松的配置我们的模板，得到我们想要的html;

　　我们究竟能够从htmlWebpackPlugin上取到哪些信息呢？

　　对htmlWebpackPlugin进行一个遍历：

　　1）.先遍历key

 　　

　　打包后得key值：

　　 

　　2).分别遍历key值

　　 

　　打包；

 　　

　　

　　打开https://www.npmjs.com/package/html-webpack-plugin ；

　　可以看见参数的详细解释；

　　通过这些可以控制输出的html的内容；

 

　　--比如我们想把一部分js放在head里，一部分放在body里；只通过配置是做不到的，要改变模板；因为模板可以直接引用打包后的信息；

 　　

　　在配置中 将inject:false ;

　　打包；

 

　　-- 再比如我们项目要上线，上线后地址跟我们本地的相对路径肯定不一样，借助新属性：pubicPath (上线后地址)

 　　

　　打包后就是线上地址

 　　

 

　　--项目上线html压缩，minify

　　https://github.com/kangax/html-minifier#options-quick-reference

　　

　　删除注释；删除空格；

　　打包；

 

8. 之前我们提到的都是单页面应用，现在我们看下多页面应用：

         1). entry可以传一个对象，可以用它还处理多页面应用；

         2). 多页面需要多个html, plugins是一个数组，可以继续调用一次插件htmlWebpackPlugin

                   --添加多页面入口：

 　　　　　　

　　　　　　--在scripts文件夹下增加a.js  b.js  c.js;让entry跟script文件夹下是一一对应的；

 　　　　　　

　　　　　　--增加chunk（页面插件）的调用；

 　　　　　　

　　　　　　运行；这时发现三个页面的内容除了title不一样  ，其他内容都一样；引用相同的js(因为模板是这么设置的);怎样让三个页面引用各自的js呢？

　　　　　　n  htmlWebpackPlugin提供了一个参数chunks

　　　　　　chunks: Allows you to add only some chunks (e.g. only the unit-test chunk)，允许添加一些对自己有用的chunk

 　　　　　　

　　　　　　将模板html指定引入的js去掉;

　　　　　　运行；

　　　　　　这时每个页面都引入自己需要的js ,生成的html文件和我们的入口文件的chunk一一对应上了；

　　　　　　htmlWebpackPlugin提供了还提供了另外一个参数excludeChunks  排除法

　　　　　　excludeChunks: Allows you to skip some chunks (e.g. don't add the unit-test chunk) 除了那些chunk被排除之外；其他的chunk都被引入进来；

 　　　　　　

　　　　　　这样可以自由的匹配每个页面需要的chunk和要排除的chunk

 

　　3).如果我们想提高性能，比如把一些初始化的脚本直接嵌入到页面；减少http请求；提高脚本的运行速度；开始webpack并没有这个功能，后来有人在githup上不断地提这个需求：

         https://github.com/jantimon/html-webpack-plugin

        

　　

　　Compilation：webpack自身暴露出来的 ，给我们使用的一个引用；

　　Assets：打包以后生成的文件的对象；通过文件名的路径进这个对象中，可以拿到这个文件的索引；

　　source()：拿到js文件的内容；

 

　　上次演示过在模板中取chunk文件路径（带publicPath）：

 　　

　　但是 compilation.assets的key文件名并不是带publicPath，所以要把entry里的publicPath过滤掉；

 　　

　　使用拿到publicPath的长度；

　　运行；

　　这时得到啦不带publicPath的路径

　　

　　然后使用官方给的方法：

 　　

　　运行；

　　(如果报错)检查下：出错，entry未定义，原因是每个都需要引入main.js文件

 　　

　　运行；

　　Main里面的内容已经被插入到script标签来啦；但是chunk中mian的 src也被插入进来；修改模板和参数：

 　　

　　运行；ok!

转载于:https://www.cnblogs.com/mbyund/p/6782657.html