07 Webpack 中的模块化开发

webpack中的模块化开发

模块：指为了完成某功能所需的程序或者子程序，模块是系统中 职责单一 且 可替换 的部分

模块化：** 指把系统代码分为一系列职责单一 且 可替换的 模块

模块化开发：指如何开发新的模块和复用已有的模块来实现应用的功能

CommonJS

//sayhi.js
var hi = "hello"
function sayHi(){
    return hi
}
module.exports = sayHi
//index.js
var sayHi = require("./sayhi")
console.log(sayHi())

AMD**

//sayhi.js
define(function(){
    var hi = "hello";
    return function sayHi(){
        return hi
    }
})
//index.js
require(['./sayHi.js'],function(sayHi){
    console.log(sayHi())
})

ES6 Module**

//sayhi.js
const hi = "hello"
export default function sayHi(){
    return hi
}
//index.js
import sayHi from './sayhi'
console.log(sayHi())

webpack中一切皆模块




webpack 对 Module的增强

import('path/to/module').then(mod=>{
    console.log(mod)
})

import from 是静态分析打包语法
import() 是动态打包语法，即通过异步的方式加载进来的

webpack对资源的模块化处理

样式文件的@import 和 javascript 的import
在css中

@import 'vars.less'

在javascript中

import style from './style.css'