webpack4.0(三)--动态生成html(html-webpack-plugin)

webpack4.0--动态生成html　　　　　　　　　　　　　　　　　　

前言：

　　webpack-dev-server实现了自动编译刷新浏览器，让编译出来的bundle.js托关于服务器根路径（电脑内存）中去。使用--contentBase指令指定启动目录（物理磁盘中的页面路径），还需要修改此页面中script标签的src属性（指向url根路径，托管路径），麻烦。除了解决此问题，还需要实现页面也放到内存中，则可以借助于一个webpack插件：html-webpack-plugin，配置启动页面。

1、安装：

　　全局:

1 npm i html-webpack-plugin -g

　　再项目根目录执行：

1 npm i html-webpack-plugin -D

2、配置

　　增加webpack配置文件配置（webpack.config.js）

var HtmlWebpackPlugin = require('html-webpack-piugin');//导入插件
　　
//配置插件的节点
plugins:[
    //自动生成html,从src到dist的过程。。
    new HtmlWebpackPlugin({
        template:'src/index.html',//以src下面的index.html为模板去创建新的html文件
            filename:'index.html',//打包好后，新建的html名字为index.html
         }),
]

　　

　　　　

　　效果：

 

　　　　　1、 运行webpack --config build/webpack.conf.js --mode production，不需要手动在dist里面手动建html文件 运行直接生成，也不需要手动处理bundle.js的引用了（托管于根路径页面需要修改引用路径）html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的bundle.js的。

　　　　2、也可以在package.json文件里面，使用scripts字段自定义脚本命令。   ---------       "build": "webpack --config build/webpack.conf.js --mode production"

　　　　

 　　　　

　　　　dist目录里面自动生成HTML文件以及js文件，html文件也自动注入了js文件，不需要我们手动完成。

　　　　

3、更多配置

　　　在实际的项目中，需要自定义一些 html-webpack-plugin 的配置， 像指定生成目录和文件， 使用指定模版生成文件， 这就更改默认配置来实现。

　　　　

 总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　使用 html-webpack-plugin 之后，我们不需要手动处理bundle.js的引用路径了，因为这个插件，已经帮我们自动创建了一个合适的script，并且引用了正确的路径，这解决了很多我们一不小心犯的小错误。