webpack 1.x HMR hot reload 配置指南·

[noyobo]

1. 获取 webpack compiler 实例

const webpack = require('webpack');
const webpackConfig = require('webpack.config.dev.js');

const compiler = webpack(webpackConfig);

compiler.plugin('done', (stats) => {
    console.log('webpack build finished');
});

2. 使用 webpack-dev-server 启动服务

const WebapckDevServer = require('webpack-dev-server');

const server = new WebapckDevServer(compiler, {
    hot: true
});

server.listen(8080, (err) => {
  console.log('Server at http://localhost:8080')
});

3. webpack.config.dev.js 关键配置

const client = require.resolve('webpack-dev-server/client');
const hotServer = require.resolve('webpack/hot/only-dev-server');
const options = require('../utils/parseOptions');

// 给所有 entry 加上 webpack-dev-server/client，webpack/hot/only-dev-server
Object.keys(webpackConfig.entry).forEach(point => {
  webpackConfig.entry[point].unshift(`${hotServer}`);
  webpackConfig.entry[point].unshift(
    `${client}?${options.protocol}//${options.host}:${options.port}/`
  );
});

4. module-hot-accept-loader 修改入口文件源码

'use strict';

/**
 * append 'modult.hot.accept()' to entry point source.
 */
module.exports = function(source, inputMap) {
  if (this.cacheable) {
    this.cacheable();
  }

  const callback = this.async();

  if (/\bmodule.hot\b/.test(source)) {
    return callback(null, source, inputMap);
  }

  const entry = this.options.entry;
  const resourcePath = this.resourcePath;

  let resourcePathInEntry = false;

  Object.keys(entry).forEach(point => {
    if (Array.isArray(entry[point])) {
      resourcePathInEntry = entry[point].some(entryFile => {
        return entryFile.startsWith(resourcePath);
      });
    }
  });

  if (!resourcePathInEntry) {
    return callback(null, source, inputMap);
  }

  return callback(
    null,
    `${source}
    
// HMR append by rax-scripts/loaders/module-hot-accept.js
// @see https://github.com/alibaba/rax
module.hot.accept(function(err){
  if (err) {
    console.log(err);
  }
});`,
    inputMap
  );
};

[noyobo]

webpack 热加载原理探索

[noyobo]

hot-module-replacement-with-webpack - 译文

[noyobo]

Introducing Hot Reloading - 译文