webpack 3.X学习之JS压缩与打包HTML文件

时间:2021-04-03 04:37:52

js压缩

webpack自带一个插件uglifyjs-webpack-plugin来压缩js,所以不需要再次安装,当一切都准备妥当,引入uglifyjs-webpack-plugin模块:

const uglify = require('uglifyjs-webpack-plugin');

因为它是一个插件,所以把它放在plugins里:

plugins:[
new uglify()
]

这样就完事了,执行命令webpack,压缩文件就OK了,一般不会出现问题,(但是我在实际操作中报错了,uglifyjs-webpack-plugin没有找到,所以,如果你报错了,还是安装一下吧)

npm install uglifyjs-webpack-plugin --save-dev

打包HTML文件

首先删除dist目录下的所有文件,然后在src文件下创建index.html文件,

/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
</body>
</html>

配置webpack.config.js文件,安装html-webpack-plugin插件

npm install html-webpack-plugin --save-dev

然后引入改插件:

const htmlPlugin =  require('html-webpack-plugin');

在plugins下,加载htmlPlugin插件

plugins:[
new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
]
  • minify:是对html文件进行压缩, removeAttributeQuotes是去掉属性的双引号;
  • hash:为了开发中js有缓存效果,加入hash,可以有效避免js缓存;
  • template:需要打包的HTML模板路径和文件名称;

参考地址: