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模板路径和文件名称;
参考地址: