webpack4实现热更新配置

安装webpack-dev-server

cnpm i webpack-dev-server -S

配置webpack.config.js,加注释的为其配置

const path = require('path')
const webpack = require('webpack')//引入webpack
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'output.js',
        publicPath:'/',//添加publicPath
    },
    //配置热更新信息
    devServer:{
        contentBase:"dist", // 指定一个本地服务器路径，否则会默认为根目录
        host:'localhost',
        port:'8080',
        open:true,//自动拉起浏览器
        hot:true//热加载并自动刷新
        //hotOnly:true  不自动刷新
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname, './src/index.html'),
            filename:"index.html"
        }),
        //热更新插件
        new webpack.HotModuleReplacementPlugin()
    ],

配置package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

运行

npm run dev