Webpack

最新推荐文章于 2022-01-16 22:23:41 发布

努力的Frank

最新推荐文章于 2022-01-16 22:23:41 发布

阅读量287

点赞数

分类专栏：前端文章标签： javascript webpack

本文链接：https://blog.csdn.net/github_34117641/article/details/78325159

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

（一）WebPack打包js资源

问题概述：

var声明的变量作用域太大；
js文件之间相互依赖则被依赖者必须写在前面加载；
js文件如果依赖于其他js文件没有显式声明。

实际场景：

1 两个不同的js文件都声明了变量A，在任何一个js中改动A，都会导致另一个js文件中A的变化。
2.bootstrap.js依赖于jquery.js，如果先加载了bootstrap.js后jquery.js会导致bootstrap.js无法工作。
3.上面2中场景，我们使用bootstrap.js的时候没有提示还要依赖jquery，是通过官方说明知道的这件事，这类似于安装eclipse必须安装java，但是安装eclipse的时候并不提醒你还要安装java结果一直都是失败【实际上是会提醒的】。

传统的js引入既然有这些缺点，那webpack怎么解决呢？我们来举个简单的例子（简化自webpack官网例子），就是使用jquery在html中添加一句话吧。

文件结构

- index.html
- jquery.js(下载的jquery.js文件)
- index.js

文件内容

index.html

<html>
  <head>
    <title>Getting Started</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

index.js

$('body').append("<b>Hello world!</b>");

效果
这里写图片描述
这个过程中，如果我们变动了jquery引入的位置放到了index.js后面则无法显示，如果我们直接将index.js给别人无法看出依赖于jquery这个脚本，如果我们在后续的脚本中重新定义$的含义也会影响运行。

webpack demo

下面我们开始使用webpack解决这些问题，首先安装nodejs，然后安装webpack

npm i -g webpack

在项目目录下通过npm安装jquery,这部会生成一个node_module文件夹

npm i jquery

在index.js中稍微修改，添加import语法（import是es6的语法和require功能类似）

import $ from 'jquery'//$只在这个文件中有效
$('body').append("<b>Hello world!</b>");

删掉原来的jquery.js文件，目录结构如下

- node_modules
- index.html
- index.js

在目录下运行指令

webpack index.js bundle.js

这一步的含义就是将index.js代码进行打包，如果index.js中import了其他js中的变量，则将其他js中改变量的声明部分拿过来，然后进行统一的打包，最后打包成一个js文件，这里起名叫bundle.js.
最后index.html中只需要引用打包好的js文件即可，index.html:

<html>
  <head>
    <title>Getting Started</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

浏览器打开index.html，效果和原来一样，这里其实我们只要留下index.html和bundle.js两个文件就可以工作了，不再需要其他任何文件，完全可以删除。

上面是通过一句cli执行的打包过程，也可以写脚本webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后通过指令运行

webpack --config webpack.config.js

小结

webpack顾名思义就是把web的东西进行打包的，我们可以看出webpack解决的是原来js文件复杂的组织方式，将原本错综复杂的js文件通过打包的方式将多个js文件打包成一个或者少数几个文件的形式进行引入，避免了开始我们说的几个问题，其实webpack也有对css打包的插件，这里我们通过小例子明白webpack的功能就不再复杂化介绍了。然而webpack也有很多不适用的场景，例如多页面中公共库和自己的js打包会导致公共库不能缓存，减慢了速度。