项目中有些代码我们只为在开发环境（例如日志）或者是内部测试环境（例如那些没有发布的新功能）中使用, 那就需要引入下面这些魔法全局变量（magic globals）：

if (__DEV__) { console.warn('Extra logging'); } // ... if (__PRERELEASE__) { showSecretFeature(); }

同时还要在webpack.config.js中配置这些变量, 使得webpack能够识别他们。

definePlugin = new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')), __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false')) }); module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, plugins: [definePlugin] };

配置完成后, 就可以使用BUILD_DEV=1 BUILD_PRERELEASE=1 webpack来打包代码了。
值得注意的是,webpack -p会删除所有无作用代码, 也就是说那些包裹在这些全局变量下的代码块都会被删除, 这样就能保证这些代码不会因发布上线而泄露。

多个入口文件

如果你有两个页面：profile和feed。如果你希望用户访问profile页面时不加载feed页面的代码, 那就需要生成多个bundles文件：为每个页面创建自己的“main module”（入口文件）。

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

在profile页面中插入<script src="build/Profile.js"></script>。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="build/common.js"></script>

异步加载

虽然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学习笔记的文章就介绍到这儿，文章来自网络，请大家参考。