生成html文件

生成html文件

1. 需要下载1个插件模块

   • html-webpack-plugin@4: HtmlWebpackPlugin简化了HTML文件的创建，你可以让插件为你生成一个HTML文件，使用默认模板, 或使用你自己指定的模板

2. webpack.config.js插件配置

   const HtmlWebpackPlugin = require("html-webpack-plugin");
   plugins: [ // 配置各种插件
   	new HtmlWebpackPlugin({ // 插件配置对象
   		title: "webpack ldx使用",
   		filename: "index.html", // 产出文件名(在dist目录查看)
   		template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
   		inject: true, // 代表打包后的资源都引入到html的什么位置
   		favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
   		// base: "./", // html网页中所有相对路径的前缀 (一般不给/给./, 虚拟路径)
   		// 控制html文件是否要压缩(true压缩, false不压缩) 
           minify: {                             //对html文件进行压缩，
                   collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
                   collapseWhitespace: true,         //是否去除空格，默认false
                   minifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                   minifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）
                   removeAttributeQuotes: true,      //是否移除属性的引号 默认false
                   removeComments: true,             //是否移除注释 默认false
                   removeCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认false
                   useShortDoctype: true             //使用短的文档类型，将文档转化成html5，默认false
            }
   	}) // 数组元素是插件new对象
   ]	
   

3. src/index.html 静态网页模板

4. 执行webpack打包命令, 观察在dist生成的目录中, 是否新增了xxx.html文件, 并且会自动引入所有需要的外部资源

报错

Cannot find module “webpack/lib/node/NodeTeplatePlugins”

在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本

插件配置项:

选项key	值类型	默认值	解释
title	String	Webpack App	在生成html网页中
filename	String	index.html	生成的html网页文件的名字 (也可以设置目录+名字)
template	String		以哪个现有的html文件作为基础模板, 在此模板的基础上, 生成html网页文件
inject	Boolean/String	true	值的范围(true || ‘head’ || ‘body’ || false) true/‘body’ -> script等引入代码, 放到body标签内部末尾 ‘head’/false -> script等引入代码, 放到head标签内部末尾
favicon	String		将制定favicon.ico图标的路径, 插入到html网页中去
base	String		制定html中所有相对路径, 都以它的值为出发起点, 例如: base的值为/bar/, 那么你HTML网页里的img, src=“my.img”, 那实际上去找的路径其实是 /bar/my.img
minify	Boolean	看mode的值	是否压缩html代码, 如果mode为’production’, 那么minify的值为true, 否则为false