初识webpack

离逝的枫

已于 2023-03-22 16:44:21 修改

阅读量94

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端 Powered by 金山文档

于 2023-03-22 16:42:05 首次发布

本文链接：https://blog.csdn.net/qq_51130780/article/details/129712220

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：什么是webpack

Webpack 是一个开源的 JavaScript 应用程序打包工具。它的主要功能是将 JavaScript、CSS、图片等静态资源打包成一个或多个静态资源文件，以便于在浏览器中加载和使用。Webpack 使用模块化的方式来管理这些静态资源，并且可以通过各种插件和 loader 来扩展其功能，比如可以支持 ES6、TypeScript、Less、Sass 等。

Webpack 最初是为了解决 JavaScript 模块化问题而创建的，随着时间的推移，它已经成为了一个功能强大的工具，被广泛应用于各种 Web 应用开发中。Webpack 提供了一种高度可配置的方式来构建应用程序，并且可以优化应用程序的性能，比如代码分割、懒加载、压缩等。同时，Webpack 还提供了一个开发服务器，可以在开发过程中自动编译和热重载应用程序。

二：怎样运用webpack

2.1 安装webpack

首先我们需要创建一个空的文件夹，这里我创建的是webpack-dome的文件夹，并进行初始化，为什么在后面会采取-y呢？因为我们在npm init的时候，系统会让我们选择许多配置项，例如pack的名字等信息，使用-y则会进行默认。

npm init -y

其次我们需要安装webpack和webpack-cli，为什么要安装这两个呢？后者是前者的打包工具，就类似于vue 和vue-cli这两者一样。

安装webpack-cli可以让你通过命令行使用Webpack，它提供了一些命令来编译、打包和优化你的项目。例如，你可以使用webpack-cli命令来创建一个新的Webpack配置文件，也可以使用它来启动Webpack开发服务器。此外，webpack-cli还提供了一些有用的参数和选项，让你可以更加灵活地配置Webpack

npm install webpack webpack-cli --save-dev

安装完成后，在创建一些部分的文件用于测试，文件目录如下

2.2了解webpack的相关运行结果

首先我们在src中创建一个index.js文件，webpack在打包的时候会默认将src文件下的index文件作为入口文件，入口文件将会告诉webpack从那个模块开始构建内部依赖图。

然后我们在dist中创建一个index.html文件作为引用文件两个文件的构成如下

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
   <script src="../src/index.js"></script>
  </body>
</html>

index.js

function add(a,b){
  console.log('我执行了A+B的算法');
  console.log(a+b);
}

add(5,10)

三：webpack打包运行

我们在src/index.js中在额外添加一个函数，并未进行使用，这样我们在进行webpack打包的时候，可以清洗的看出webpack打包后的代码是怎么优化的

function add(a,b){
  console.log('我执行了A+B的算法');
  console.log(a+b);
}
function showName(name){
  console.log('我的名字是'+name);
}
add(5,10)

我们在命令行中敲入npx webpack，webpack则会进行打包处理，当然在我们没有说明任何的情况下，webpack会采取生产模式打包，即打包后的代码如下，即会在dist文件中多出一个main.js，且中端里面也会提醒我们，没有注明什么模式下打包，默认打包模式是生产模式

npx webpack

我们点击main.js查看打包后的代码，则我们会发现，在main.js中，出现的是我们刚刚定义的一个add函数里面执行的语句，并没有出现我们定义了但未使用过的js代码。这就是webpack给我们的好处，即在打包过程中，webpack会进行根据我们提供的入口文件进行扫描，且也会将我们定义了但未使用过的代码或者引入了未使用过的代码进行舍去，不会让它出现在打包后的代码中，节约了相关内存。

四：webpack开发环境下的代码

我们在npx webpack --mode development后，在main.js中会出现如下代码

npx webpack --mode development

其实简单的来看，进过webpack打包后的函数都会被同一的放入一个立即执行函数（IIFE）中，然后再这个立即执行函数中这个 __webpack_modules__["./src/index.js"]();，它及时将webpack_module这个模块对象中取出入口文件中的方法执行，即在开发下的打包也不会将未使用的代码进行相关处理。因此在实际的运用中我们通常会采取生成环境的mode来进行打包。

(() => { // webpackBootstrap
  var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ (() => {

        eval("function add(a,b){\r\n  console.log('我执行了A+B的算法');\r\n  console.log(a+b);\r\n}\r\nfunction showName(name){\r\n  console.log('我的名字是'+name);\r\n}\r\nadd(5,10)\n\n//# sourceURL=webpack://webpack-dome/./src/index.js?");

        /***/
      })
  });

  var __webpack_exports__ = {};
  __webpack_modules__["./src/index.js"]();

})();

在这个文件中的对象的key值即为我们设置的入口文件的路径，当然我们也可以不只是设置一个入口文件，当然设置多个的话，其key值也会有多个，后面的value即为该模块所执行的相关代码。

  var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ (() => {

        eval("function add(a,b){\r\n  console.log('我执行了A+B的算法');\r\n  console.log(a+b);\r\n}\r\nfunction showName(name){\r\n  console.log('我的名字是'+name);\r\n}\r\nadd(5,10)\n\n//# sourceURL=webpack://webpack-dome/./src/index.js?");

        /***/
      })
  });

当然这只是简单的写了两个方法，然后通过webpack打包后查看相应的文件，在实际运用中，我们更多的是使用各种loader来处理各种CSS，减少打包后的相关体积，优化相关性能。