04_01.webpack打包初体验

1. 要做操作的内容：

2. 首先用模块化的思想将需要使用的js模块暴露出来。

demo a.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-16 17:25:01 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-16 17:25:01 
 */
let a = 10,
    b = 20;

module.exports = {
a : a,
b : b
};

demo b.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-16 17:25:44 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-16 17:25:44 
 */
module.exports = function (a,b) {
  console.log(a + b);
  }

3. 然后用main.js将需要使用的js引入进来

demo main.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-16 17:27:06 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-16 17:27:06 
 */
let obj = require('./a.js'),
     fn = require('./b.js');

fn(obj.a,obj.b);

4. 以上做完以后，在全局安装一次webpack

npm i webpack -g

• 然后在要做操作的对应根目录下执行一次下面的代码：

npm i webpack -D

5. 将main.js打包成bundle.js

webpack main.js bundle.js

6. 然后在index.html手动引入bundle.js文件

7. 查看效果

8. 同时可以看到网络只请求了bundle.js，而没有请求其他js