webpack学习笔记-白红宇的个人博客

webpack学习笔记

发布日期：2021-05-06 08:37:53 浏览次数：21 分类：原创文章

本文共 1656 字，大约阅读时间需要 5 分钟。

前端js包演变过程

CommonJS

todo
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 -gnpm install webpac k-cli -g测试安装成功:webpack -vwebpack- cli - vC:\workspace\workspace_front\vue\vue狂神\myvue>webpack -vwebpack 5.36.2webpack-cli 4.6.0C:\workspace\workspace_front\vue\vue狂神\myvue>webpack-cli -vwebpack 5.36.2webpack-cli 4.6.0

使用webpack

在这里插入图片描述

hello.js

// 暴露一个方法exports.sayHi=function(){       document.write("<h1>狂神说ES6</h1>");}exports.sayHi2=function(){       document.write("<h1>狂神说ES6  2222</h1>");}//....

main.js

var hello = require("./hello");hello.sayHi();hello.sayHi2();

webpack.config.js

module.exports={       entry: './modules/main.js',    output:{           filename: "./js/bundle.js"    }}

bundle.js

(()=>{   var r,t={   645:(r,t)=>{   t.sayHi=function(){   document.write("<h1>狂神说ES6</h1>")},t.sayHi2=function(){   document.write("<h1>狂神说ES6  2222</h1>")}}},i={   };(r=function r(e){   var n=i[e];if(void 0!==n)return n.exports;var o=i[e]={   exports:{   }};return t[e](o,o.exports,r),o.exports}(645)).sayHi(),r.sayHi2()})();

在这里插入图片描述

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script src="dist/js/bundle.js"></script></body></html>

上一篇：使用vue-cli搭建vue程序

下一篇：vue 狂神教程学习笔记

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

前端js包演变过程

CommonJS

AMD

CMD

ES6 模块

安装Webpack

使用webpack

index.html

发表评论

最新留言

关于作者

推荐文章