所需插件
html-webpack-plugin
本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置)
- **了解
html-webpack-plugin**
HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件。
- 安装依赖
npm install html-webpack-plugin --save-dev
- 配置
webpack.config.js
文件- 在头部定义常量,引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
- 在
plugins
模块引入new HtmlWebpackPlugin({ template:'./public/index.html', //模板文件路径 filename:'webpack.html', //生成的html文件名称 minify:{ minimize:true, //打包为最小值 removeAttributeQuotes:true, //去除引号 removeComments:true, //去除注释 collapseWhitespace:true, //去除空格 minifyCSS:true, //压缩html内css minifyJS:true, //压缩html内js removeEmptyElements:true, //清除内存为空的元素 }, hash:true //引入产出资源的时候加上哈希避免缓存 })
- 在头部定义常量,引入插件
- 运行打包命令之后就可以压缩
webpack --mode development
- 打包效果
public 下的 index.html 打包成为 build下面的 webpack.html啦。
原文地址:https://www.cnblogs.com/hunterxing/p/10425297.html
时间: 2024-11-08 01:17:00