这种做法，因为commonJS 的同步加载机制，会导致入口文件打包之后非常臃肿。在首屏，用到用不到处理代码的都会在一开始就加载，严重影响了首屏加载时间。
代码切分之后
我利用webpack的code splitting 特性，将各个步骤的代码进行拆分，实现按需加载。这里主要利用了 webpack 的 require.ensure 函数实现的。非常方便，只需要把异步加载的代码，放到 require.ensure 里面的回调函数就可以实现：
require.ensure(['./mods/stepone.js'], function(){ var stepone = require('./mods/stepone.js'); stepone.checkone(); }, 'stepone'); // 第三个参数设置打包名称
这样设置，webpack 就会单独生成拆分的文件，我们还需要设置拆分文件的名字和路径。这里我费了一番周折。
webpack 默认给拆分的文件用数字命名，如果我们自己不进行设置，会得到 1.min.js 这样类似的文件。我们可以在 webpack.config.js 中，通过 output.chunkFilename 来设置分块生成文件的名称，分块的路径可以通过 output.publicPath 设置。这里一定要设置 publicPath，不然得到的路径有可能不是我们上线打包的路径。具体我的设置如下:
output: { path: path.join(__dirname, 'dist'), filename: 'js/apps/[name].min.js', publicPath: '/dist/', // 设置require.ensure路径 chunkFilename: 'js/apps/[name].min.js' // 设置require.ensure 文件名 }
总结
webpack 使用起来感觉非常新颖，也容易入手！今天总结的多是入门的内容，后续还要继续使用~