白癜风优惠 https://disease.39.net/bjzkbdfyy/171024/5786050.html1.前言基础的配置咱们上一章已经学完，相信大家也学会了，在咱们上次学习的时候学到打包之后的文件夹里面只有js文件，当我们启动开发服务访问服务地址的时候只会进入到build目录下面，这个时候我们还得在打包文件中新建一个index.html文件，这样太麻烦了，那么，能不能够在我们的src目录下面建立一个html模板文件，打包的时候直接将html文件也打包到build目录下面呢？那么，就让我们学习一下html的插件。我们先在src目录下面新建一个index.html文件，用于当作模板文件2.安装html插件（html-webpack-plugin）yarnaddhtml-webpack-plugin-D执行这条命令来安装html插件。3.配置插件安装好插件之后，我们是需要进行配置的，一说到配置，当然是进入到我们的配置文件中进行配置了。进入配置文件，首先要引入我们刚才安装的html插件letHtmlWebpackPlugin=require(html-webpack-plugin)//引入htmlwebpack插件引入之后，就是配置我们的插件了：//插件的配置plugins:[//数组，放着所有的webpack插件newHtmlWebpackPlugin({template:./src/index.html,//模板文件（html文件）的位置filename:index.html,//打包后的文件名字})],现在我们的配置文件是这个样子的那么，现在我们来执行一下打包命令看一下结果：npmrunbuild现在，在我们的build目录下有一个index.html文件，并且这个html文件它自动的引入了打包后的js文件，现在应该明白这个html插件了吧！现在，在我们的build目录下有一个index.html文件，并且这个html文件它自动的引入了打包后的js文件，现在应该明白这个html插件了吧！4.压缩html文件和生成hash戳从上图我们可以看到，现在的html并不是压缩的，想要压缩的话我们还需要配置：plugins:[//数组，放着所有的webpack插件newHtmlWebpackPlugin({template:./src/index.html,//模板文件（html文件）的位置filename:index.html,//打包后的文件名字minify:{//压缩html文件removeAttributeQuotes:true,//删除属性的双引号collapseWhitespace:true//折叠空行，变成一行},hash:true,})],加上上面的配置之后，在让我们来看一下：（执行npmrunbuild）大家可以看到，现在html已经被压缩了，并且生成了hash戳。
转载请注明：http://www.guyukameng.com/aspnet/aspnet/2024-11-02/17563.html
