Question

CommonJS 是同步的，但是 webpack 提供了异步加载指定依赖的方法。这对客户端路由来说非常有用，你需要对每个页面使用路由，但是又想在真正使用某个功能的时候才去下载相关代码。

你需要声明想要异步加载的“分界点”。例如：

if (window.location.pathname === '/feed') {
  showLoadingState();

require.ensure([], function() { // 语法奇怪，但是有用
    hideLoadingState();
    require('./feed').show(); // 函数调用后，模块保证在同步请求下可用
  });
} else if (window.location.pathname === '/profile') {
  showLoadingState();
  require.ensure([], function() {
    hideLoadingState();
    require('./profile').show();
  });
}

webpack 会完成其他工作，生成额外的 chunk 文件并帮你加载。

webpack 在 script 标签中加载这些文件的时候，会假定它们处于根目录下。你可以通过 output.publicPath 来设置其他路径。

// webpack.config.js
output: {
    path: "/home/proj/public/assets", // webpack 编译的资源位置路径
    publicPath: "/assets/" // 引用文件时使用的路径
}