为了账号安全,请及时绑定邮箱和手机立即绑定

求助,webpack 如何打包html,在html中可以压缩哪些东西?如何配置?

/ 猿问

求助,webpack 如何打包html,在html中可以压缩哪些东西?如何配置?

webpack 如何打包html,在html中可以压缩哪些东西?如何配置?


查看完整描述

4 回答

?
ABOUTYOU

1. 安装: html-webpack-plugin 插件完成打包
2. 命令:npm install html-webpack-plugin –save-dev
3. 配置:
引入:const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',(生成的页面标题)
filename: 'assets/admin.html',(生成的文件名)
template: 'src/assets/test.html',(原来的index.html)
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
})
]



查看完整回答
反对 回复 2019-11-16
?
料青山看我应如是

打包html使用插件html-webpack-plugin

html-loader就是用来处理 html中的图片的,可以对图片进行压缩等优化的操作

命令行安装:npm install html-loader --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');

配置:

plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
minify: {
collapseWhitespace: true,//折叠空白区域 、压缩代码
removeComments: true, //移除HTML中的注释,但是会保留script和style中的注释
removeRedundantAttributes: true,//删除<script>的type="text/javascript"
removeScriptTypeAttributes: true,//删除script的类型属性,在h5下面script的type默认值:text/javascript
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
useShortDoctype: true
}
})


查看完整回答
反对 回复 2019-11-16
?
素胚勾勒不出你

这里说明了,如果单纯使用html-webpack-plugin插件来处理html,那么在此插件下设置minify为false,就不会压缩html文件;但是如果使用了loader与html-webpack-plugin一起处理html,那么html的压缩还受loader的影响。

查看完整回答
反对 回复 2019-11-16
?
泛舟湖上清波郎朗

如果单纯使用html-webpack-plugin插件来处理html,那么在此插件下设置minify为false,就不会压缩html文件;但是如果使用了loader与html-webpack-plugin一起处理html,那么html的压缩还受loader的影响。
从你的描述来看,我估计是受了loader的影响了。

查看完整回答
反对 回复 2019-11-16

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信