webpack学习 笔记

前端js包演变过程

CommonJS

CommonsJS
服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或 module.exports 来导出需要暴露的接口。

require ( “module” ) ;
require ( " . ./ module.js " );
export.dostuff = function(){};
module.exports = somevalue;

优点:
·服务器端模块便于重用
· NPM中已经有超过45万个可以使用的模块包·简单易用
缺点:
·同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的·不能非阻塞的并行加载多个模块

AMD

Asynchronous Module Definition

CMD

CMD: Commons Module Definition

ES6 模块

EcmaScript6

import "jquery " ;
export function dostuff( ) {}
module “localModule” {}

安装Webpack

npm install webpack -g
npm install webpac k-cli -g
测试安装成功:
webpack -v
webpack- cli - v

C:\workspace\workspace_front\vue\vue狂神\myvue>webpack -v
webpack 5.36.2
webpack-cli 4.6.0

C:\workspace\workspace_front\vue\vue狂神\myvue>webpack-cli -v
webpack 5.36.2
webpack-cli 4.6.0

使用webpack

hello.js

// 暴露一个方法
exports