vue的热更新

使用vue的热加载可以实现局部内容的刷新，更改数据后，不会刷新整个页面

在webpack.config.js中设置：

对config.devServer中添加属性hot:true

对config.plugins添加

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

具体设置如图：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  target: "web",
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(jpg|jpeg|svg|gif|png)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [

    // 添加VueLoaderPlugin，以响应vue-loader

    new VueLoaderPlugin(),
    //在编译的过程中，以及在页面上去判断环境（开发环境、正式环境）
    new webpack.DefinePlugin({
      'process-env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HTMLPlugin()

  ]
}

if (isDev) {
  config.devServer = {
    port: 8000,   //配置端口号
    host: '0.0.0.0',  //让页面可以通过本机的ip访问，也可以使用手机同一局域网内通过ip访问
    overlay: {
      errors: true  //webpack在编译的时候如果出现了错误，可以在网页上显示
    },
    hot: true  //热加载
  }
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}

module.exports = config

猜你喜欢