webpack热更新配置

1安装全局依赖

cnpm i -g webpack
cnpm i -g webpack-cli
cnpm i -g webpack-dev-server

2,配置package.json

npm init

3安装项目依赖

cnpm i -D webpack
cnpm i -D webpack-cli
cnpm i -D webpack-dev-server

4创建webpack.config.js

 const path = require('path');
 const webpack = require('webpack');
module.exports = {
  entry: path.join(__dirname, './app/main.js'),
  output: {
    publicPath:'/public',
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    host: 'localhost',
    port: '8080', //端口号
  },
  plugins: [
    //热更新插件
    new webpack.HotModuleReplacementPlugin()
  ]
}

5，package.json

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

6，启动 npm run start

补充

安装的版本号

"devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }