码迷,mamicode.com
首页 > Web开发 > 详细

webpack+express实现“热更新”和“热加载”

时间:2018-01-17 18:10:33      阅读:3353      评论:0      收藏:0      [点我收藏+]

标签:listen   entry   自动更新   一个   compiler   刷新   vue.js   ntp   vue   

“热更新”:对应的是 ‘webpack-dev-middleware‘ 中间件

“热加载”:对应的是 ‘webpack-hot-middleware‘ 中间件

为了使用这两个中间件,必须修改“webpack.config.js"和”server.js“


 

webpack配置文件(“webpack.config.js")和上一篇博文写的大致相同,下面给出一个vue+webpack开发常用的配置:

const path = require(‘path‘);
const htmlPlugin = require(‘html-webpack-plugin‘);
const webpack = require(‘webpack‘);

module.exports = {
  entry: [‘webpack-hot-middleware/client‘,‘./index.js‘],
  output:{
    path: path.resolve(__dirname,‘./dist‘),
    filename: ‘[name].bundle.js‘
  },
  plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new htmlPlugin({
      template: path.resolve(__dirname,‘./index.html‘)
    })
  ],
  resolve:{
    extensions: [‘.js‘,‘.vue‘],
    alias:{
      ‘vue‘:‘vue/dist/vue.js‘
    }
  },
  module:{
    loaders:[
      {
        test: /\.js$/,
        loader: ‘babel-loader?presets=env‘,
        include: path.resolve(__dirname,‘src‘)
      },{
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        include: path.resolve(__dirname,‘src‘)
      }
    ]
  }
}

值得注意的是entry和plugins的变化:

entry多引入了一个‘webpack-hot-middleware/client‘入口文件 ,这个很明显就是一个核心为“window.location.reload();”的js文件,用于刷新浏览器,生成的时候会被webpack一并打包进bundle.js

plugins多了两个:

new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()

官方解释大概是说用来替换一些字解释,使得错误界面不会太乱。

你会发现这两处改写都是为了‘webpack-hot-middleware‘刷新浏览中间件而改写的。


express的写法(server.js)如下:

const express = require(‘express‘);
const webpack = require(‘webpack‘);
const config = require(‘./webpack.config.js‘);
//给webpack带上配置
const compiler = webpack(config);
//自动更新编译代码中间件
const devMiddleWare = require(‘webpack-dev-middleware‘)(complier,{});
//自动刷新浏览器中间件
const hotMiddleWare = require(‘webpack-hot-middleware‘)(compiler);

const server = express();
//调用2个中间件
server.use(devMiddleWare);
server.use(hotMiddleWare);

server.listen(8088);

完事儿~~

这个时候你去试下修改app.vue那些文件,你就会发现编译的代码自动刷新了~~

 

webpack+express实现“热更新”和“热加载”

标签:listen   entry   自动更新   一个   compiler   刷新   vue.js   ntp   vue   

原文地址:https://www.cnblogs.com/amiezhang/p/8303794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!