JS打包与代码分割
参考来源：https://github.com/ruanyf/webpack-demos#demo01-entry-file-source
后面的代码：https://github.com/947133297/lwj-webpack-demo
打包AMD和commonJS模块
webpack默认支持这两种模块的打包
amd.js
define('amd',function(){
return {
data:'content from amd module'
}
});
commonJS.js
module.exports = { data:'content from commonjs module' }
配置文件
module.exports = { entry: './main.js', output: { filename: 'bundle.js' } };
入口文件
var amd = require('./js-module/amd'); var com = require('./js-module/commomJS'); console.log(amd); console.log(com);
运行结果：可正常输出这两个模块，网络请求只有一个bundle.js,可见这两个模块的内容都打包进了一个js文件中
chunk（这里的理解偏颇）
entry chunk ：包含了 webpackJsonp、__webpack_require__ 的定义 ，__webpack_require__.e用于以promise方式加载依赖后执行组件的代码（入口文件的代码），如：
normal chunk：包含了入口文件所需的模块的代码，里面调用了webpackJsonp来注册依赖，如：
多组件代码抽取
如果多个组件中有相同的代码，每个组件都都像上个例子那样完全打包一份，那虽然减少了网络访问次数，但可能导致无谓的流量消耗，因为多个模块是可以共用代码的
全局JS：
把要复用的部分抽取到一个额外的全局js中，然后手动引入这个js，其他组件中直接使用这个js即可，如：
module.exports = { entry: { bundle1:'./main1.js', bundle2:'./main2.js' }, output: { filename: '[name].js' } }; // main1.js console.log('组件1获取数据' + data); //main2.js console.log('组件2获取数据' + data); //commonData.js: var data = 'this is common data'; index.html: <html> <script src="commonData.js"></script> <body> <script type="text/javascript" src="bundle1.js"></script> <script type="text/javascript" src="bundle2.js"></script> </body> </html>
有没有办法不全局，而且可以使多个组件共用呢？这个需求可唯一推测出只能使用js模块，但是以上测试中，发现使用模块的话，会完全打包进去，以至于不能实现代码复用。其他webpack提供一个require.ensure可以实现模块的不打包，从而达到复用的目的
require.ensure
对以上代码进行改造：
// commonData.js exports.data = 'this is common data'; // mian1.js require.ensure(['./commonData'], function(require) { var m = require('./commonData'); console.log('组件1获取数据' + m.data); }); //main2.js require.ensure(['./commonData'], function(require) { var m = require('./commonData'); console.log('组件2获取数据' + m.data); }); //index.html <html> <body> <script type="text/javascript" src="bundle1.js"></script> <script type="text/javascript" src="bundle2.js"></script> </body> </html>
运行结果一样。只不过这次实现了代码复用：
以上效果的另外一种实现方式，是使用 bundle-loader ，语法不同但效果一样就不再举例了
源码分析：
bundle1、2.js中包含了webpackJsonp、__webpack_require__以及这个函数对象的一系列方法，以及对应入口文件的执行代码
__webpack_require__.e 函数：用于根据模块id来获取模块，返回一个promise。往header上写一个script标签，这个标签onload的时候，也就是这个新增script中的webpackJsonp函数执行完了，就触发promise的resolve方法（执行了对应入口文件的代码）
补充测试：
模块1和2ensure了一个文件，模块3ensure了另一个文件。则会额外生成0.js和1.js。也就是说多少个文件被ensure，就会额外生成多少个文件（名字从0开始计算），重复ensure不会额外生成文件，而是复用之前的
与ensure具有相同功能的是import。这两者都用于动态代码分割，如果使用import的话需要注意promise的兼容，可以使用响应的垫片库来处理，简单的import使用，可以参考仓库中的demo5
CommonsChunkPlugin
代码抽取还可以用这个插件来实现，测试代码如下：
抽取依赖
// 配置文件 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports = { entry: { bundle1: './main1.js', bundle2: './main2.js' }, output: { filename: '[name].js' }, plugins: [ new CommonsChunkPlugin('chunkInit') ] } // main1.js require('./com'); require('./comm2'); var data = 'this is differenet1 '; //main2.js require('./com'); require('./comm2'); var data = 'this is differenet2 '; //com.js exports.data = '这里存放的是公共代码' //comm2.js exports.data = '这里存放的是公共代码2' //index.html <html> <body> <script src="chunkInit.js"></script> <script src="bundle1.js"></script> <script src="bundle2.js"></script> </body> </html>
运行结果：
会生成一个chunkinit.js文件（这个名字是我们在new 插件的时候指定的），这个文件中包含了webpackJsonp、__webpack_require__以及这个函数对象的一系列方法以及被依赖的模块的代码，也就是说require进来的东西并不是动态加载的，而且直接写到了这个chunkinit.js文件中。而两个bundle文件调用了webpackjsonP函数，里面的回调函数中执行了对应入口文件的代码
可见，这个插件实现的功能和require.ensure都是代码抽取，但两者本质上不同：
组件的初始化定义：包含了webpackJsonp、__webpack_require__以及这个函数对象的一系列方法
ensure：动态加载代码，抽取的是被依赖的代码，多个组件的初始化定义也还是重复的
插件：非动态加载代码，抽取的是多个组件的初始化定义到一个文件中，并且里面写好了被依赖的模块代码
以上两个组件都引用了两个相同的依赖，所以这两个依赖都放到了chuninit中。测试发现，多个组件中相同的依赖会被放到chunkinti中，而差异的部分则放到对应的bundle中，也就是说bundle中可能同时出现出现被依赖的模块代码以及对应的入口文件的代码
使用jquery
回顾以下：jq这个库兼容amd和commonJS的导入方式，require.ensure可以以不打包的形式导入一个库
有了以上的理解，怎么使用jq就很好想象了，以下使用ensure来导入，同样的理解使用上面的插件来导入应该也是可行的
require.ensure(['./jquery-3.2.1.min'], function(require) { var jq = require('./jquery-3.2.1.min'); jq('body').attr('c2','true'); });
运行结果正常。
