【webpack篇】原理

最新推荐文章于 2024-09-23 17:37:18 发布
最新推荐文章于 2024-09-23 17:37:18 发布
阅读量47 收藏
点赞数
文章标签： webpack ViewUI
原文链接：https://segmentfault.com/a/1190000013506049
版权

【webpack篇】原理

之前每件事都差不多，直到现在才发现差很多。

现在才发现理清一件事的原委是多么快乐的一件事，我们共同勉励。

懒得扯淡，直接正题

不基于例子的讲原理都是扯淡，知乎一样的举例都是卖弄

要说现在的模块打包肯定用的最多的就是webpack,下面由浅入深的讲一下它的原理，在这里举例打包js和css模块。

ps: 基于webpack 4

打包构建解析

示例环境依赖及部分代码

依赖
  • "clean-webpack-plugin": "^0.1.18",
  • "css-loader": "^0.28.10",
  • "html-webpack-plugin": "^3.0.4",
  • "style-loader": "^0.20.2",
  • "webpack": "^4.0.1",
  • "webpack-cli": "^2.0.10"
webpack.config.js
const path = require('path');
const webpack = require('webpack');
//用于插入html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除输出目录，免得每次手动删除
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: path.join(__dirname, 'index.js'),
    },
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'js/[name].[chunkhash:4].js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-learn</title>
</head>
<body>
    <div class="wrapper">webpack-learn</div>
</body>
</html>
index.css
.wrapper {
    font-size: 20px;
    color: #f00;
}
js 文件
// index.js
const test = require('./src/js/test');
require('./src/css/index.css');
console.log(test);
// test.js
const str = 'test is loaded';
module.exports = str;

页面结构如下：

clipboard.png

运行
$ webpack

打包结果分析

查看 dist/js/index.[chunkhash:4].js 文件，发现文件有点大，不知道从何处看起，那么我们把入口js文件进行剥茧抽丝，清空，看一下，最简单的打包后的文件。

/******/ (function(modules) { // webpackBootstrap
/******/     var installedModules = {};
/******/     function __webpack_require__(moduleId) {
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/         module.l = true;
/******/         return module.exports;
/******/     }
/******/     __webpack_require__.m = modules;
/******/     __webpack_require__.c = installedModules;
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/     __webpack_require__.r = function(exports) {
/******/         Object.defineProperty(exports, '__esModule', { value: true });
/******/     };
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module['default']; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, 'a', getter);
/******/         return getter;
/******/     };
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/     __webpack_require__.p = "";
/******/     return __webpack_require__(__webpack_require__.s = "./index.js");
/******/ })
/******/ ({
/***/ "./index.js":
/***/ (function(module, exports) {
eval("//# sourceURL=webpack:///./index.js?");
/***/ })
/******/ });

发觉其打包产出是一个FFII，参数为由模块名和模块文件处理成的函数组成的对象，由此，我们可以猜测 webpack在打包时做了模块文件到函数的转换。我们再把入口文件内容恢复，再看一下打包结果的FFII参数。

clipboard.png

除了 src/js/test.js 和 src/css/index.css 模块以外还有 node_modules 里面的 css-loader 和 style-loader。由此，我们可以猜测 webpack在打包时做了模块依赖的解析和深度遍历模块的依赖

weixin_34137799
关注
浅谈webpack组织模块的原理
08-27
浅谈webpack组织模块的原理 Webpack 作为前端开发中的主流打包工具，已经成为前端开发的必备技能。了解 Webpack 的组织模块原理对于提高前端开发效率和质量非常重要。本文将详细介绍 Webpack 组织模块的原理，包括...
webpack Proxy工作原理
小白菜的博客
05-07 898
webpack Proxywebpack Proxywebpack-dev-server工作原理跨域 webpack Proxy webpack Proxy , 即wepack提供的代理服务，将客户端发送的请求转发给其他服务器 目的是为了解决开发模式下的跨域问题 想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server webpack-dev-server webpack-dev-server是webpack官方推出的一款开发工具，将自动编译和自动刷新浏览器
webpack -- 关于proxyTable的配置在开发环境和生产环境中的原理解析
热门推荐
积少成多
07-19 1万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 首先，proxyTable是我们在本地开发环境中调试接口用的，目的是为了解决本地跨域的问题，因为本地地址为localhost:xxxx/xxx 在线上的生产环境是没用的！！！ 假设我们用的是vue-cli命令行工具生成的webpack项目模板，我们很容易能在config文件夹下面找到index.js文件。 ...
Webpack proxy工作原理
weixin_42287176的博客
02-08 2307
一、proxy是什么？ proxy是Webpack提供的代理服务，用来解决本地开发时的跨域问题（浏览器安全策略限制），实现的基本方式就是接收客户端的请求后转发到目标服务器。 二、实现原理 ​ 在开发阶段中，webpack-dev-server会启动一个本地开发的服务器，即跨域所使用的代理服务器，通过利用http-proxy-middleware代理中间件，代理服务器会响应本地请求，继而转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，代理服务器再将数据返回给本地。 ​ 在此阶段中不涉及任.
webpack设置服务器代理详解
赵天铭的博客
08-08 8564
服务器代理的作用 解决跨域： 1. 原理： 利用服务器访问服务器没有跨域问题的原理 2. 请求过程：先向代理(同源)服务器发起请求，再由代理(同源)服务器请求外部服务器 代理服务器的搭建 安装 http-proxy-middleware 包 `npm install --save-dev http-proxy-middleware` 一个简单的代理服务器代码 var exp...
webpack代理的理解
sinat_37680470的博客
12-29 1801
平时开发项目的时候调用接口肯定会遇到跨域的问题，通常是用webpack配置项解决跨域的问题。 方式1：vue项目中配置config/index.js 中的proxyTable proxyTbale: { '/api': { target: 'https://www.baidu.com' changeOrigin: true pathRe...
webpack视频教程及源码百度云盘下载地址
08-12
### Webpack视频教程及源码知识点详解 #### 一、Webpack简介 Webpack是一款现代JavaScript应用程序的模块打包器。它能够将多个模块（如JavaScript文件、样式表、...希望本篇介绍能帮助大家更好地理解和使用Webpack。
webpack项目开发配置1
08-04
Webpack 项目开发配置详解 在本篇文章中，我们将详细介绍如何配置 Webpack 项目开发环境，包括安装 Node.js...这些步骤是 Webpack 项目开发的基础，掌握这些步骤可以帮助您更好地理解 Webpack 的工作原理和配置方法。
webpack HappyPack实战详解
10-16
最后，如果想要深入理解HappyPack的工作原理，可以参考happypack原理解析的文章，这篇文章深入探讨了HappyPack的内部机制，以及它是如何将构建任务分解并行执行的。 总之，Webpack HappyPack是一个强大的工具，可以...
详解webpack2异步加载套路
12-09
webpack提供的一个非常强大的功能就是code spliting(代码切割)。 在webpack 1.x中提供了...具体的套路见我写的另一篇blog: webpack分包及异步加载套路 一句话总结就是： 在输出的runtime代码中,包含了异步chunk的id及ch
关于配置webpack中的代理
张大晴的博客
11-20 1595
参考文档： https://blog.csdn.net/guzhao593/article/details/81516135 https://blog.csdn.net/GoldenLegs/article/details/81981142?utm_source=blogkpcl1
webpack设置服务器代理
weixin_41266672的博客
11-01 1915
服务器代理的作用 解决跨域： 原理： 利用服务器访问服务器没有跨域问题的原理 请求过程：先向代理(同源)服务器发起请求，再由代理(同源)服务器请求外部服务器 // proxy 中间件的选择项 proxyTable ： { ‘/api’: { // 目标服务器 host target: ‘http://10.16.85.138:8080’, // 默认false，是否需要改变原始主机头为目标URL ...
webpack与vite处理base64图片
owo_ovo的博客
09-23 521
webpack与vite处理base64图片
Element UI在工程中使用方式
DngYT的博客
09-18 467
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它提供了丰富的 UI 组件，可以帮助你快速搭建出美观且功能丰富的 Vue 应用。尽管 Element UI 官方已经宣布停止对 Vue 3 的直接支持（转而支持 Element Plus，其 Vue 3 版本），但它在 Vue 2 项目中仍然非常流行。
在 Webpack 中配置多入口应用并实现公共依赖的提取
前端小白的博客
09-23 359
在这个例子中，app1 和 app2 分别对应两个不同的入口文件，Webpack 会分别为它们生成一个输出文件，文件名分别为 app1.bundle.js 和 app2.bundle.js。这对于提高应用的加载性能非常有帮助。：这是一个缓存组，用于匹配来自 node_modules 的模块，并将它们提取到一个名为 vendors~[name].js 的文件中。：这是另一个缓存组，用于匹配至少被两个 chunk 共享的模块，并将它们提取到一个名为 common~[name].js 的文件中。
利用shuji还原webpack打包源码
2301_80115097的博客
09-20 1052
Webpack是一个用于构建现代 Web 应用程序的静态模块打包工具。它是一个高度可配置的工具，通过将应用程序的所有资源（例如JavaScript、CSS、图片等）视为模块，并使用依赖关系来管理它们之间的引用，将它们打包成一个或多个最终的静态资源文件。大家可以看我之前有一篇webpack接口泄露的edu挖掘文章。
海康VM脚本中使用opencvsharp和halcon
u014584014的博客
09-20 498
最近海康VM用的有点多，但是VM有时候处理复杂图像还是比较难受的，拖拉拽不一定就好，有时候需要加入别的或者已经用opencvsharp写好的一些功能想直接放进VM中。下一步打算把python的numpy图像塞进VM中，至此VM就可以拥有python图像处理的一切功能，也可以重复利用手上现有的python程序。于是需要在VM脚本中转换halcon opencvsharp VM脚本图像 图像类型之间互相转换。VM脚本实际上就是Csharp，只要Csharp支持的几乎都可以在VM脚本实现。环境配置在注释中体现。
Webpack
前端小白的博客
09-23 181
Webpack 的主要功能是将应用中的不同模块（如 JavaScript、CSS、图片等）打包成一个或多个输出文件，支持 CommonJS、AMD 和 ES6 模块等多种模块化方案。Webpack 支持代码分割（Code Splitting），可以将应用分割为多个 chunk，从而实现按需加载，提高加载性能，尤其适合大型应用。Webpack 拥有丰富的插件和 Loader 生态，可以处理各种类型的文件和资源，支持 CSS 预处理器、图片压缩、代码优化等多种功能。
为什么在技术选型中选择 webpack
最新发布
前端小白的博客
09-23 392
Webpack 提供了一个强大的开发服务器 webpack-dev-server，支持热模块替换（HMR）、自动刷新、压缩等特性，极大地提高了开发效率。：通过设置 mode: ‘production’，可以启用一系列优化，如代码压缩、Tree Shaking 等，确保生产环境下的性能。：通过配置不同的加载器，可以处理各种类型的文件，如 JavaScript、CSS、图片、字体等。：通过插件，可以扩展 Webpack 的功能，实现代码分割、优化、生成 HTML 文件等。
webpack打包原理与loader、plugin实现详解
本篇文章将深入探讨webpack的核心原理，以及如何自定义loader和plugin，帮助开发者更好地理解和优化构建流程。 1.webpack打包基本原理 webpack 的打包过程可以分为四个主要步骤：解析（Parsing）、编译...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值