[译]开始学习webpack(2)_H5之家 - 中国HTML5教程资源分享第一站

订阅页面和资料页面共用许多代码（像React以及其他的样式和组件等）。webpack可以抽出他们共用的代码，然后打一个通用包在各个页面缓存。

// webpack.config.js var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { entry: { Profile: './profile.js', Feed: './feed.js' }, output: { path: 'build', filename: '[name].js' // Template based on keys in entry above }, plugins: [commonsPlugin] };

在上一步的script标签之前加上 <script src="build/common.js"></script> ，然后尽情享受免费的高速缓存吧。

9、异步加载

CommonJS是同步的，但是Webpack提供一个方法来异步的指定依赖。这在客户端路由中很有用，每个页面都需要路由，你不想直到你真正需要他们的时候才下载相关功能。

指定你想异步加载的分割点，比如：

if (window.location.pathname === '/feed') { showLoadingState(); require.ensure([], function() { // this syntax is weird but it works hideLoadingState(); require('./feed').show(); // when this function is called, the module is guaranteed to be synchronously available. }); } else if (window.location.pathname === '/profile') { showLoadingState(); require.ensure([], function() { hideLoadingState(); require('./profile').show(); }); }

webpack会做接下来的工作，并且产生额外的块文件，然后加载他们。

当你加载这些文件到html的script标签，webpack假定他们在根目录，你可以通过 output.publicPath 来定义:

// webpack.config.js output: { path: "/home/proj/public/assets", //path to where webpack will build your stuff publicPath: "/assets/" //path that will be considered when requiring your files } 其他资源

看一下真实的案例：一个成功的团队是如何使用webpack的。这是Pete Hunt在全球开源大会上关于Intagram使用的webpack的讨论：。