14- webpack 压缩 html 代码

最新推荐文章于 2024-01-30 11:31:32 发布

好_快

最新推荐文章于 2024-01-30 11:31:32 发布

阅读量1.1k

点赞数

分类专栏： webpack学习笔记文章标签： webpack html-webpack-plugin

本文链接：https://blog.csdn.net/ZWQ0325/article/details/97011638

版权

webpack学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

在 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>

参考链接

好_快

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14- webpack 压缩 html 代码

在 10-webpack自动生成 index.html 之后，开始使用 html-webpack-plugin 自动生成的 html 文件，压缩功能也要通过他来完成。一、编辑 webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require("html-webpack-plugin");modu...
复制链接

扫一扫