// webpack.config.js module.exports = { entry: { Profile: './profile.js', Feed: './feed.js' }, output: { path: 'build', filename: '[name].js' // name是基于上边entry中定义的key } };

在profile页面中插入<script src=http://www.cnblogs.com/jingmoxukong/p/"build/Profile.js">。feed也一样。

Feed和Profile页面存在大量通用代码(比如React、公共的样式和组件等等)。webpack可以抽离页面间公共的代码，生成一个公共的bundle文件，供这两个页面缓存使用:

// 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' // 为上面entry的key值 }, plugins: [commonsPlugin] };

在上一步引入自己的bundle之前引入<script src=http://www.cnblogs.com/jingmoxukong/p/"build/common.js">

虽然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 默认会从项目的根目录下引入这些chunk文件。你也可以通过 output.publicPath来配置chunk文件的引入路径

// webpack.config.js output: { path: "/home/proj/public/assets", // webpack的build路径 publicPath: "/assets/" // 你require的路径 }

看一个真实的例子，看看他们是怎么使用webpack。这是Pete Hunt在Instagram.com中谈论webpack的视频。

相比较browserify和browserify，在你的项目中大量的使用webpack插件才能体现出webpack的优势。当使用了插件后，代码才会被复写。其余的都是默认加载。

Tags：webpack   11_前端技术