webpack配置基础[00] -认识模块化

模块化

在使用webpack后可以对js文件进行各种编译，例如将ES6的语法转化成ES5的语法对浏览器兼容，将less，lass转化成浏览器可识别的css文件。

在js文件十分复杂时，难免会造成变量命名冲突的问题，这时候需要将一些变量封装起来进行隐藏处理。在早期的时候可以用函数立即调用来实现作用域的隐藏：

var modelA = (function(){ //全局
   var obj = {};
   var a = 10;
   var func = function(){
                 return a;
              };

    obj.a = a;
    obj.func = func;
    return obj;//模块对象
})()

//使用
var a = modelA.a;

三种模块化的方法

1. commonJS

commonJS一般用在node.js中的模块化
导出：

//a.js
//......导出
var num = 0；
model.exports = {
    flag:true;
    func1(a, b){
        return a + b;
    }，
   num,
}

导入:

//b.js
//导入
var {flag,func1,num} = require("./a.js")

2. ES6

<!--html-->
<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>

导出：

//a0.js
let num1 = 0;
let num 2 = 1;
function sum(num1, num2){
  return num1 + num2
}
class Person{
run(){
   ;}
}
export{
  num1,sum
}

//a1.js
const pi = 3.14;
export default pi;//默认导出 只能存在一个

导入：

//b.js
import {num1，sum, Person} from "./a0.js"
import π form "./a1.js"//默认导入
//import * as myMod form "./a0.js" //
//let a = myMod.num1 
sum(num1,20);
const sam = new Person();
sam.run();