webpack配置devserve了但是修改html文件无法更新
entry:path.resolve(__dirname,'src/index.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].[contenthash].js'
},
devServer:{ //实时重新加载
host:"localhost",
port:"8081",
contentBase:"./dist", //告诉从什么位置查找文件
compress:true, //启动gzip压缩
open:true, //自动打开浏览器
hot:true, //热更新
}
网上搜索得知: 只监听webpack.config.js中的entry入口的文件(js、css),对于不在entry中的html不监听与刷新页面
解决方法:
1.配置loader + 判断当前环境引入html到entry的js文件中 https://github.com/AriaFallah/WebpackTutorial/tree/master/part1/html-reload
2.搭建一个静态服务 https://www.npmjs.com/package/livereload 或者 https://github.com/mklabs/tiny-lr
验证了一下方法1:可以,但是发现了一个问题
new webpack.optimize.UglifyJsPlugin({ // 压缩 js
compressor: {
warnings: false,
},
}),
报错webpack.optimize.UglifyJsPlugin is not a constructor,
内置的JS压缩插件不能使用了,可以使用uglifyjs-webpack-plugin,
//添加到此处
,optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: false,
}
})
]
}
webpack@4以后的版本,弃用了许多@3的插件,其中包括:
分离打包js文件的插件 webpack.optimize.CommonChunkPlugin();
压缩js文件的插件 webpack.optimize.UglifyJsPlugin();
定义产品上线环境webpack.optimize.DedupePlugun();
分离css文件插件extract-text-webpack-plugin();
css文件压缩插件 CssMinimizerPlugin()
能都并入entry和output的配置中,分离打包默认不会实现