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

Question

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

Answer 1

1. 安装: html-webpack-plugin 插件完成打包2. 命令：npm install html-webpack-plugin –save-dev3. 配置：引入：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}})]

Answer 2

打包html使用插件html-webpack-pluginhtml-loader就是用来处理 html中的图片的,可以对图片进行压缩等优化的操作命令行安装:npm install html-loader --save-devconst 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/javascriptremoveStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"useShortDoctype: true}})

Answer 3

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

Answer 4

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