hooyantsing's Blog

P17 压缩html和js

字数统计: 194阅读时长: 1 min
2020/11/30

尚硅谷2020最新版Webpack5实战教程

压缩js

压缩JavaScript非常简单,只需要把开发模式改为 生产模式 即可。

编写配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
// 生产环境下会自动压缩js代码
mode: 'production',
}

压缩html

配置 HtmlWebpackPlugin 插件即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
mode: 'production',
}
CATALOG
  1. 1. 压缩js
  2. 2. 压缩html