当我们用vue脚手架做完项目后,npm run build
打包之后,
有没有查看源码,全是压缩好的。但是我就不想让它压缩,该怎么办呢?
困惑了几天,查了各种资料。终于终于…
来,上干货:
首先,我们得了解一点点webpack的知识。
webpack中压缩js 的插件叫 uglifyjs-webpack-plugin
,
压缩css 的插件叫 optimize-css-assets-webpack-plugin
然后我们找到/build/webpack.prod.conf.js
文件,
然后你会发现:1
2const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin’)
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)
然后我们就可以在页面中搜索OptimizeCSSPlugin
和UglifyJsPlugin
这两个关键词所在的地方
配置如下:1
2
3
4
5
6// css 压缩代码,将下面代码注释掉
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
1 | // 压缩js代码,将下面代码注释掉 |
只要将上面代码注释掉,然后npm run build
你就会发现,欧了。
最后就是修改html
了,
配置如下:1
2
3
4
5
6
7
8
9
10
11
12
13new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === ‘testing’
? ‘index.html’
: config.build.index,
template: ‘index.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
这里我们将上面的minify
改成minify:false
是的,就可以了。