HMR:当修改一个js或者css的时候,只刷新修改的内容,不进行整个页面的刷新。
css的HMR——只支持开发环境
不能使用mini-css-extract-plugin需要使用style-loader,因为它不支持抽离出的css,需要用style-loader
① 在webpack.config.js中配置 (需要webpack-dev-server配合)
//头部引入webpack
const webpack = require("webpack");//****
//****
//****
//****devServer: {hot: true,
},//****
//****
//****
//****//插件配置出添加
plugins: [new htmlWebpackPlugin({template: "./src/index.html",filename: "index.html",chunks: ["main"],}),new CleanWebpackPlugin(),// new miniCssExtractPlugin({// filename: "css/index-[contenthash:6].css",// }),// new txtWebpackPlugin({ name: "老韩" }),new fileWebpackPlugin(),new webpack.HotModuleReplacementPlugin(), //webpack自带插件
],
②运行
package.json中
"scripts": {"server": "webpack-dev-server "},
npm run server
js的HMR
vue 使用vue-loader