4 回答

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
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',(生成的頁(yè)面標(biāo)題)
filename: 'assets/admin.html',(生成的文件名)
template: 'src/assets/test.html',(原來(lái)的index.html)
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
})
]

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊
打包html使用插件html-webpack-plugin
html-loader就是用來(lái)處理 html中的圖片的,可以對(duì)圖片進(jìn)行壓縮等優(yōu)化的操作
命令行安裝:npm install html-loader --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
配置:
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
minify: {
collapseWhitespace: true,//折疊空白區(qū)域 、壓縮代碼
removeComments: true, //移除HTML中的注釋,但是會(huì)保留script和style中的注釋
removeRedundantAttributes: true,//刪除<script>的type="text/javascript"
removeScriptTypeAttributes: true,//刪除script的類型屬性,在h5下面script的type默認(rèn)值:text/javascript
removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
useShortDoctype: true
}
})

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊
這里說(shuō)明了,如果單純使用html-webpack-plugin插件來(lái)處理html,那么在此插件下設(shè)置minify為false,就不會(huì)壓縮html文件;但是如果使用了loader與html-webpack-plugin一起處理html,那么html的壓縮還受loader的影響。

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個(gè)贊
如果單純使用html-webpack-plugin插件來(lái)處理html,那么在此插件下設(shè)置minify為false,就不會(huì)壓縮html文件;但是如果使用了loader與html-webpack-plugin一起處理html,那么html的壓縮還受loader的影響。
從你的描述來(lái)看,我估計(jì)是受了loader的影響了。
添加回答
舉報(bào)