在开发者模式中使用使用webpack-isomorphic-tools

由于webpack-isomorphic-tools

不支持

const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

所以我们在做开发者模式的时候,我们的webpack-isomorphic-tools不能和上面的两个中间件同一个进程, 否则webpack-isomorphic-tools会一直等待build任务

这里我们使用并发进程的方式来达到开发者热加载的功能

这里在package.json中的命令, 看看dev的命令就知道整个流程了

    "dev": "concurrent --kill-others \"npm run watch-client\" \"npm run server\"",
    "watch-client": "node ./webpack/webpack-dev-server"

我们看看client的配置

// 开发环境, 主要完成热加载(webpack-isomorphic-tools, 无法跟webpack-dev-middleware共用)
const Express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../src/config/config.js');
const logger = require('../src/server/resource/log4js.js');
const webpackConfig = require('../webpack.config.js');

const app = new Express();
const compiler = webpack(webpackConfig);
const middleware = webpackMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  contentBase: 'src',
  stats: {
    colors: true,
    hash: false,
    timings: true,
    chunks: false,
    chunkModules: false,
    modules: false
  }
});
app.use(middleware);
app.use(webpackHotMiddleware(compiler));

app.listen(`${config.port + 1}`, function onAppListening(err) {
  if (err) logger.error(err);
  logger.info('Webpack development server listening on port %s', `${config.port + 1}`);
});

看看服务器的配置

const WebpackIsomorphicTools = require('webpack-isomorphic-tools');
const context = require('path').resolve(__dirname, '../../');
const wic = require('../../webpack.isomorphic.config');

// 全局变量
global.WebpackIsomorphicTools = new WebpackIsomorphicTools(wic)
.server(context, () => require('./server'));

跟上一个版本不一样的是这里我们不需要调用development(), 默认是开发者模式, 除非你使用NODE_ENV=production环境变量

然后需要注意的是我们的开发者模式下, 我们使用的是端口加一的方式(就是比server开启的端口多1, 那么我们如何获取client build出来的assert?)

我们需要在webpack的配置里添加publicpath

  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: `http://${config.host}:${config.port + 1}/`
  },

接着我们就可以拿这些assert在我们的服务器端完成渲染了

剩下的可以看看doc

https://github.com/halt-hammerzeit/webpack-isomorphic-tools#what-are-webpack-assetsjson