当配置成生产环境后,打包的js文件会被压缩,但是html文件默认不会被压缩
需要手动配置
详情:----1---- ----2---- ----3----注释
// webpack 是node写出来的 node的写法
let path = require('path');
// console.log(path.resolve('dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { //开发服务器的配置
port: 3000, //端口
progress: true, //打包进度条
contentBase: './dist', //以这个目录作为静态服务
open: true, //打包完成自动打开浏览器
compress: false //启用压缩
},
//----1----将开发环境更改成生产环境
mode: 'production', //模式 默认两种 生产: production 开发: development
entry: './src/index.js', //入口
output: {
// ----4----比之前加入了hash,这样每次打包就会生成一个新的文件,不会覆盖
// [hash:8],只展示八位hash值
filename: 'bundle.[hash:8].js', //打包后的文件名称
path: path.resolve(__dirname, 'dist'), //路径必须是一个绝对路径,需要引入node的自带模块
},
plugins: [ //数组 放着所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html', //需要放打包文件的html模板路径
filename: 'index.html', //打包完成后的这个模板叫什么名字
minify:{ //----2----配置html压缩
removeAttributeQuotes:true, //删除html中的双引号
collapseWhitespace:true, //html文件折叠成一行
},
hash:true, //----3----为html文件添加hash戳
})
]
}