webpack 热中间件拆分块答案

【问题标题】：webpack hot middleware split chunkwebpack 热中间件拆分块
【发布时间】：2017-03-14 19:28:31
【问题描述】：

我正在尝试利用 webpack 代码拆分。一切看起来都运行良好，webpack 正确拆分代码，依赖关系，几乎符合预期。

除非我不能让它与热模块替换一起工作。

我成功加载了127.0.0.1:8009/main.js

但是 main.js 正在尝试加载 127.0.0.1:8001/assets/1.chunk.js

这有意义吗？我一定是错过了什么。

我在 127.0.0.1:8001 运行我的节点服务器，在 127.0.0.1:8009 运行热中间件客户端

** main.js**

require.ensure([], function (require) {
  var admin = require('./admin');
}, 'admin');

我的 Webpack 配置

const PATHS = {
  root: __dirname,
  client: path.join(__dirname, '../', 'browser', 'scripts'),
  public: path.join(__dirname, '../', '../', 'public')
};

var webpackConfig = {
    hotPort: process.env.PORT_HOT,
    devtool: 'eval',
    name: 'browser',
    resolve: {
      root: PATHS.root,
      extensions: ['', '.js', '.jsx', '.styl'],
      modulesDirectories: [
        'node_modules',
        PATHS.client,
      ],
    },
    entry: {
      main: ['main', hotMiddlewareScript]
    },
    output: {
      path: PATHS.public,
      filename: '[name].js',
      publicPath: '/assets/'
    },
    module: {
        noParse: [
            /lodash/
        ],
        loaders: [
        {
          test: /\.js$|\.jsx$/,
          exclude: /node_modules/,
          loaders: ['babel']
        }
    },
};

简单的热服务器

const app = express();

const compiler = webpack(webpackConfig);

app.use(webpackDev(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath
}));

app.use(webpackHot(compiler));

app.listen(webpackConfig.hotPort);

【问题讨论】：

标签： webpack code-splitting webpack-hot-middleware

【解决方案1】：

将 publicPath 设置为热中间件客户端就可以了

output: {
  path: PATHS.public,
  filename: '[name].js',
  chunkFilename: '[chunkhash].js',
  publicPath: http://127.0.0.1:8009
}

【讨论】：