webpack-dev-server的使用可以参考（https://www.npmjs.com/package/webpack-dev-server）

Webpack-dev-server主要是在开发时候用，实时热加载的，仅用于开发。

这个组件如果实现热加载都很简单，这我贴出我几个改动的地方：

安装HtmlWebpackPlugin模块

yarn add HtmlWebpackPlugin -D

添加启动命令到package.json

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.0.4",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

package.json配置

webpack.config.js的HtmlWebpackPlugin配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.vue$/,
            use: ["vue-loader"]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
          }),
        new VueLoaderPlugin()
    ]
}

目前配置的是开发模式模式。

运行

yarn dev

运行结果

关于web-dev-server的其他选项可以去参考webpack-dev-server官方网站（https://www.webpackjs.com/configuration/dev-server/）

以上的代码地址：https://gitee.com/hsjklab/vue-webpack4

好了，这次的分享就到这里，有什么技术问题可以评论留言或私信小编。