叉烧店并不卖叉烧

使用webpack-hot-middleware插件

webpack TTT 23℃ 0评论

参考

概述

使用了webpack-dev-middleware插件之后,我们可以使用webpack-hot-middleware插件。这个插件可以帮助我们,在我们修改项目文件的时候,只要我们按下保存,我们不用更新浏览器就可以在浏览器看到我们修改后的结果(在按下保存的时候,插件自动帮我们进行重新编译,编译过程有时间损耗)。可以让我们省去刷新浏览器的动作

安装

npm install --save-dev webpack-hot-middleware

配置

配置webpack.config.js文件

……
var webpack = require('webpack');
……
// 热加载(一)为每个入口配置热加载脚本
// 热加载(二)为webpack添加插件
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';

module.exports = {
    entry: {
        index: [path.resolve(APP_PATH, "index.js"), hotMiddlewareScript],
        childIndex: [path.resolve(APP_PATH, "child-index.js"), hotMiddlewareScript],
        login: [path.resolve(APP_PATH, "login.js"), hotMiddlewareScript]
    },
……
    plugins: [
        /**热加载**/
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        /****/
……

配置webpack-dev-middleware插件的配置文件

……
const webpack = require('webpack'); // *
const hotMiddleare = require('webpack-hot-middleware'); // *热加载
const webpackConfig = require('./webpack.config.js'); // *
const app = express(); // *
// 含有webpack配置文件的独享
const compiler = webpack(webpackConfig); // *
……
// *热加载
app.use(hotMiddleare(compiler, {
    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
}))
……

结果

当我们修改了一个文件之后按下保存可以看到


  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.0",
    "express": "^4.16.4",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.6.0",
    "webpack-hot-middleware": "^2.24.3"
  },
  "dependencies": {
    "element-ui": "^2.5.4"
  }

转载请注明:叉烧店 » 使用webpack-hot-middleware插件

喜欢 (0)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址