webpack学习笔记-EW帮帮网

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务铂特优选

一、为什么要用webpack

一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>


    <script src="js/city.js"></script>
    <script src="js/goods.js"></script>
    <script src="js/member.js"></script>

</head>
<body>

</body>
</html>

这是我们常见的一个页面，上面是第三方的类库，下面是我们项目的业务代码，绝大多数情况下，我们的业务代码是需要依赖第三方类库的，根据js在浏览器上的加载特性，所有的js代码是从上至下来加载的，因此如果我们的业务代码依赖到了上面的第三方类库，那么顺序一定不能颠倒，如果颠倒成下面这样，肯定就会报错，这样就会给我们编码造成很大的心智负担

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>


    <script src="js/city.js"></script>
    <script src="js/goods.js"></script>
    <script src="js/member.js"></script>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>

</head>
<body>

</body>
</html>

假设把所有用到的js代码按照正确的顺序合并到一个js文件中，肯定能解决这个问题，如下面这个例子，bundle.all.js 包含了所有的第三方类库和项目业务代码

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

</body>
</html>

但是这样又有了新的问题，作用域问题，文件太大，可读性差，可维护性弱

例如：jquery会给全局作用域 window 绑定window.$, lodash 会给window绑定window._ ，就连我们的业务代码也可能会给window绑定全局变量 window.member，这些变量会使window对象变的臃肿

在app.js中写一个立即调用的表达式，在表达式内部定义的变量在外部是访问不到的

;(function (){
    var myName = "孙悟空"
})()

console.log(myName)

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

这样就不会像一般用var定义的全局变量一样，挂在window上，不会污染window，可以解决作用域的问题。

如果我们想对外暴露这个变量

var myName = (function (){
    var myName = "孙悟空"
    return myName
})()

console.log(myName)

这种方法看似既解决了作用域问题，又可以对外暴露我们想暴露的变量，但是还有其他的问题，比如说，把所有的代码合在一起，就算修改一行代码，也得把整个文件重新编译加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lodash.4.17.21.js"></script>
</head>
<body>
  <script>
    const str = _.join(['孙悟空','猪八戒','沙僧','唐僧','小白龙'] , '-')
    console.log(str)
  </script>
</body>
</html>

上面这种方法我们只使用了lodash的一个方法，却加载了整个的lodash.js文件，这个文件非常的大，如果能按需加载lodash.js中我们用到的方法就好了

二、代码的拆分

1.common.js模块化

我们创建 math.js

const add = (x, y) => {
    return x + y
}

const minus = (x , y) => {
    return x - y
}

module.exports = {
    add,
    minus
}

创建server.js 并且通过 require 导入 math.js

const math = require("./math.js")

console.log(math.minus(1 , 2))
console.log(math.minus(100 , 50))

这里我们得借助node.js的环境进行执行

但是我们的浏览器其实是不支持这种模块化的，它不识别require这种语法，我们通过html导入server.js来让浏览器执行server.js

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

</body>
</html>

可以看到在node.js环境可以执行的代码，在浏览器失效了

如何让浏览器支持 common.js的语法呢

创建add.js

const add = (x , y) => {
    return x + y
}

// 第一个参数定义依赖了哪些模块 七二个参数是一个回调函数
define([] , function(){
    return add
})

创建minus.js

const minus = (x , y) => {
    return x - y
}

// 第一个参数定义依赖了哪些模块 七二个参数是一个回调函数
define([] , function(){
    return minus
})

创建main.js

require(['./js/add.js' , './js/minus.js'] , function (add , minus){
    console.log(add(5 , 6))
    console.log(minus(100 , 50))
})

创建一个 html 应用main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    // 这里的require.js 是一个第三方类库，通过data-main来应用我们创建的main.js
    <script data-main = "./js/main.js" src="js/require.js"></script>
</body>
</html>

成功的实现在浏览器上识别 require 这种common.js的导入方法

webpack学习笔记

网站公告

今日签到

热门文章

最新发布