14- webpack 压缩 html 代码

在 10-webpack自动生成 index.html 之后，开始使用 html-webpack-plugin 自动生成的 html 文件，压缩功能也要通过他来完成。

一、编辑 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin");
module.exports = {entry: './src/index.js',mode:"none",//方便看代码未处理样式output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')},plugins:[new HtmlWebpackPlugin({title: "14- webpack 压缩 index 代码",}),]
};

二、未压缩的 index.html 文件

构建代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>14- webpack 压缩 index 代码</title></head><body><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

三、编辑 webpack.config.js ，配置 minify

经过测试设置对象，设置 true、false 无效

const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin");
module.exports = {entry: './src/index.js',mode:"none",//方便看代码未处理样式output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')},plugins:[new HtmlWebpackPlugin({title: "14- webpack 压缩 index 代码",minify: {collapseWhitespace: true,//删除空格、换行},}),]
};

四、压缩的 index.html 文件

构建代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>14- webpack 压缩 index 代码</title></head><body><script type="text/javascript" src="main.bundle.js"></script></body></html>

参考链接

管理输出
html-webpack-plugin
更多压缩配置Minification
示例代码

14- webpack 压缩 html 代码相关推荐

16-webpack 压缩 CSS 代码
从 06-webpack 加载 CSS 之后,能够正常加载 CSS ,并且能够正常显示. 要看到压缩 CSS 代码效果,需要先把 CSS 从 bundle.js 中抽离出来,并导入独立的文件中去,然后 ...
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
vue webpack压缩代码_vue.js - 解决vue-cli打包后自动压缩代码
当我们用vue脚手架做完项目后,npm run build打包之后, 有没有查看源码,全是压缩好的.但是我就不想让它压缩,该怎么办呢? 困惑了几天,查了各种资料.终于终于... 来,上干货: 首先,我 ...
uglifyjs报错 webpack_用webpack的uglifyJS压缩ES6代码报错
问题不能用webpack压缩ES6的代码吗?去掉ES6代码就正常了出错的代码处,都是对象属性简写,箭头函数等ES6代码 module.exports = { mounted(){this.rea ...
webpack抽离css，压缩css代码和 js代码
前言在实际生产环境中,较少使用style-loader,css代码被打包到了 main.js里面,这时候就需要对css代码进行抽离优化. module.exports = {module:{rule ...
开发函数计算的正确姿势——支持 ES6 语法和 webpack 压缩
为什么80%的码农都做不了架构师?>>> 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算 ...
Webpack实战（八）：教你搞懂webpack如果实现代码分片（code splitting）
2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天.以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着 ...
Linux oracle数据库自动备份自动压缩脚本代码
Linux oracle数据库自动备份自动压缩脚本代码 Linux oracle数据库备份完成后可以自动压缩脚本代码. 复制代码代码如下: #!/bin/bash #backup.sh #edit: ...
java 代码压缩javascript_利用Java来压缩 JavaScript 代码详解
通过移除空行和注释来压缩 JavaScript 代码 /** * This file is part of the Echo Web Application Framework (hereinafte ...

14- webpack 压缩 html 代码

一、编辑 webpack.config.js

二、未压缩的 index.html 文件

三、编辑 webpack.config.js ，配置 minify

四、压缩的 index.html 文件

14- webpack 压缩 html 代码相关推荐

最新文章

热门文章