webpaack代码分割 + 懒加载demo练习， webpack3.10.0版本搭建，目前webpack4.X版本不兼容。
实现懒加载两种方式，一种webpack内置方法,一种es 2015 loader
1.webapck method
1）require.ensure()
接受四个参数： []: dependencies
callback
errorCallBack（该参数可省略）
chunkName
注： require.ensure需依赖promise方法,如果不支持，需添加polyfill进行语法转义
2）require.include
当子模块中都依赖第三方模块时，可将第三方模块在父模块通过该方法打包
2.ES 2015 Loader spec
import() -> Promise // 通过import方式调用，返会promise对象
import().then() // 相当于该方式使用
代码分割场景：
1.分离业务代码 和 第三方依赖
2.分离业务代码 和 业务公共代码 和 第三方依赖
3.分离首次加载 和 访问后加载的代码（用于前端优化）
demo练习
1）代码结构如下：
2）各部分代码：
moduleA.js：
// 只导出该文件，作为公共代码依赖，用于代码练习 export default 'moduleA';
pageA.js
// import './subPageA'; // 同步加载 // import './subPageB' // 同步加载方式 // import * as _ from 'lodash'; //************以上为webpack3.5练习代码 */ // 通过require.include()方法将，子模块中公共moduleA提取出来 require.include('./moduleA'); // 采用import方式动态引入 /** * import(依赖).then(); * 在依赖中通过加注释： webpackChunkName： ‘name'方式 给定chunk name * 如果多个import指定的chunk name相同，则会将不同的依赖都打入到同一个chunk 中 */ import(/* webpackChunkName: 'subPageA' */'./subPageA').then(function(pageA) { console.log(pageA) }) // 懒加载方式1, 采用require.ensure方式加载subPageA/subPageB/lodash /** * require,ensure方法四个参数： * 【】 依赖 * callback * errorCallBack(该参数可省略), * chunkname */ // require.ensure('./subPageA', function() { // var subPageA = require('./subPageA'); // require之后代码才会真正执行 // }, 'subPageA'); require.ensure('./subPageB', function() { // var subPageB = require('./subPageB'); // 如果没有require 则代码不会执行 }, 'subPageB'); require.ensure([], function(){ var _ = require('lodash'); // require之后才会真正的执行 _.join(['1', '2'], '3'); }, 'vendor') export default 'PageA';
pageB.js
// export default import './subPageA'; import './subPageB'; import * as _ from 'lodash'; export default 'PageB';
subPageA.js
import './moduleA'; console.log('tgis is subpageA'); export default 'subPageA';
subPageB.js
import './moduleA'; console.log('this.is subPageB'); export default 'subPageB';
webpack.config.jvar webpack = require('webpack');var path = require('path');
module.exports = { entry: { 'pageA': './src/pageA', // 由于是单entry，则commonschunkplugin不会起作用 // 采用require.include方式进行代码分割 // 'pageB': './src/pageB', // 'vendor': ['lodash'] // 指定第三方插件单独打包 }, output: { path: path.resolve(__dirname, './dist'), // The publicPath configuration option can be quite useful in a variety of scenarios. // It allows you to specify the base path for all the assets within your application. publicPath: './dist/', // 代码动态加载地址 filename: '[name].bundle.js', chunkFilename: '[name].chunk.js' }, module: { rules: [ ] }, // plugins: [ // // 将业务代码中公共出现的部分进行抽取 // new webpack.optimize.CommonsChunkPlugin({ // name: 'common', // minChunks: 2, // chunks: ['pageA', 'pageB'] // }),
// new webpack.optimize.CommonsChunkPlugin({ // // names: ['vendor', 'mainfest'] // 可使用names参数，将vendor与manifest合并配置 // name: 'vendor', // 指定从vender中抽取公共代码 // minChunks: Infinity // 不需要重复 // // name: 'common', // 公共代码名称为common // // minChunks: 2 // 在所有的chunk中出现2次就打包 // }), // // 想将webpack代码独立出来，保持第三方代码纯净，可以在补充一个commonchunkpluginspeizhi // new webpack.optimize.CommonsChunkPlugin({ // name: 'mainfest', // minChunks: Infinity // }) // ] }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!- 引入打包后的pageA.bundle.js 查看其他代码是否能够加载--> <script src='./dist/pageA.bundle.js'></script> </head> <body> </body> </html>