亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

求助,webpack 如何打包html,在html中可以壓縮哪些東西?如何配置?

求助,webpack 如何打包html,在html中可以壓縮哪些東西?如何配置?

webpack 如何打包html,在html中可以壓縮哪些東西?如何配置?
查看完整描述

4 回答

?
ABOUTYOU

TA貢獻1812條經驗 獲得超5個贊

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
?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

打包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
?
素胚勾勒不出你

TA貢獻1827條經驗 獲得超9個贊

這里說明了,如果單純使用html-webpack-plugin插件來處理html,那么在此插件下設置minify為false,就不會壓縮html文件;但是如果使用了loader與html-webpack-plugin一起處理html,那么html的壓縮還受loader的影響。

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

TA貢獻1818條經驗 獲得超3個贊

如果單純使用html-webpack-plugin插件來處理html,那么在此插件下設置minify為false,就不會壓縮html文件;但是如果使用了loader與html-webpack-plugin一起處理html,那么html的壓縮還受loader的影響。
從你的描述來看,我估計是受了loader的影響了。

查看完整回答
反對 回復 2019-11-16
  • 4 回答
  • 0 關注
  • 1336 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號