Vue SPA 和 webpack - 缩小和破坏 index.html答案

【问题标题】：Vue SPA and webpack - minify and mangle index.htmlVue SPA 和 webpack - 缩小和破坏 index.html
【发布时间】：2021-10-19 07:11:39
【问题描述】：

我的 Vue 项目在 public 文件夹中包含一个大的 index.html。目前，当我按照here 的描述构建项目时，它只是复制到输出文件夹中。

我怎样才能让 webpack 像对所有其他文件一样缩小它？

【问题讨论】：

请具体说明哪些资产。他们不在src中有什么原因吗？这是将它们作为其余应用程序文件处理的最直接方法。 IIRC index.html 默认被缩小。
如果您的项目使用 Vue CLI，index.html 默认会被缩小。
我使用 Vue CLI 并且 index.html 没有缩小...让我展示我的配置文件

标签： vue.js webpack

【解决方案1】：

我将此添加到我的 vue.config.js

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                if (process.env.NODE_ENV === 'production')
                    args[0].minify = {
                        minifyCSS: true,
                        minifyJS: true,
                        minifyURLs: true,
                        removeComments: true,
                        collapseWhitespace: true,
                        collapseBooleanAttributes: true,
                        removeScriptTypeAttributes: true,
                        removeAttributeQuotes: true,
                        removeEmptyAttributes: true,
                        removeStyleLinkTypeAttributes: true
                    };
                return args;
            })
    },
    ...  // Other configs
}

更多详情here

【讨论】：