webpack 打包去掉 js 文件中所有注释

如果webpack不做任何配置,打包时并不会移除所有注释,部分声明注释还会保留。

如果刚好你的网站用了webpack,并且还刚好用了yui的相关插件,比如jsencrypt.js等,而且又刚好用了import的方式引入。

那么你的项目打包时候,必定会有这么一段注释代码:

1
2
3
4
5
6
/*!
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/

如果刚好把你的网站丢给绿盟扫描,那么恭喜你,绿盟会报错检测到目标站点存在javascript框架库漏洞,并且会提示参考(验证)YUI:2.9.0

处理办法

当然最简单的方法是直接删掉注释即可,这样有个问题是后续打包还会存在该注释,一劳永逸的方法是直接改webpack配置,去掉打包后的注释即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 基础配置文件
const baseConfig = require('./webpack.base.config');
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');

const webpackConfig = merge(baseConfig, {
optimization: {
...baseConfig.optimization,
minimizer: [new TerserPlugin({
terserOptions: {
output: {
comments: false // 此配置最重要,无此配置无法删除声明注释
},
format: {
comments: false,
},
},
extractComments: false,
})], // 替换js压缩默认配置
},
mode: 'production'
})
module.exports = webpackConfig;

terser-webpack-plugin插件完整配置参考:https://webpack.docschina.org/plugins/terser-webpack-plugin/

vue 项目中添加移除注释配置

修改项目根目录下的 vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
const vueConfig = {
// ...
chainWebpack: config => {
// 删除注释
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.output = {
comments: false
};
return args
})
}
}
module.exports = vueConfig
本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2021-09-17/webpack-remove-comments/

如果您觉得文章不错,可以点击文章中的广告支持一下!