webpack学习 笔记

前端js包演变过程

CommonJS

webpack学习 笔记_第1张图片
CommonsJS
服务器端的NodeJS遵循CommonsJS规范,该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块,然后通过exports或 module.exports 来导出需要暴露的接口。

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

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

AMD

Asynchronous Module Definition
webpack学习 笔记_第2张图片

CMD

CMD: Commons Module Definition
webpack学习 笔记_第3张图片

ES6 模块

EcmaScript6
webpack学习 笔记_第4张图片

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

安装Webpack

webpack学习 笔记_第5张图片


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

webpack学习 笔记_第6张图片webpack学习 笔记_第7张图片webpack学习 笔记_第8张图片

hello.js

// 暴露一个方法
exports.sayHi=function(){
     
    document.write("

狂神说ES6

"
); } exports.sayHi2=function(){ document.write("

狂神说ES6 2222

"
); } //....

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("

狂神说ES6

"
)},t.sayHi2=function(){ document.write("

狂神说ES6 2222

"
)}}},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()})();

webpack学习 笔记_第9张图片

index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<script src="dist/js/bundle.js">script>
body>
html>

你可能感兴趣的:(大前端知识)