webPack浅析

最新推荐文章于 2024-06-28 16:20:01 发布
最新推荐文章于 2024-06-28 16:20:01 发布
阅读量89 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44874811/article/details/116427154
版权

webPack是什么

模块打包工具：分析项目结构，
（1）翻译
找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）进行翻译
（2）打包
将多种静态资源 js、css、less 转换成一个静态文件供浏览器使用。减少了页面的请求。其核心在于让我们进行模块化开发，并且会帮助我们处理模块间的依赖关系。

工作原理

自执行函数，参数为对象（key：路径value：函数eval：代码）， 通过递归的方式不停的调用自己进行打包
把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并**按需加载。

做什么

代码转换、文件优化、代码分割、模快合并、自动刷新发布、代码效验。

优化

懒加载、热更新、按需导入、大文件cdn代理

无羁。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack源码浅析
content6的博客
02-05 1390
compliation就像是生产一部手机，生产的过程基本一致，但生产的手机可能是小米手机也可能是魅族手机。生命周期，之后根据webpack config文件的output配置的path属性，将文件输出到指定的文件夹。compilation代表的是一次编译作业，每一次的编译都可能不同；的加持，代码编写非常灵活，node中流行的callback回调机制（说的就是回调地狱），webpack使用的炉火纯青。至此，从入口文件开始，webpack收集完整了该模块的信息和依赖项，接下来就是如何进一步打包封装模块了。
浅析html webpack plugin插件的使用教程
11-21
使用前提：项目中安装了Webpack使用步骤： 步骤一、在项目的根目录下输入cnpm i html-webpack-plugin -D 将html-webpack-plugin插件安装到开发依赖 其作用是根据指定的模板页面在内存中生成相应的HTML页面 步骤二、...
webpack浅析
nerao的博客
06-17 149
前端的工程化和自动化 grunt gulp browserify webpack 当今主流 webpack vue react angular 当前市面 2 个版本 webpack 3.0 webpack 4.0 webpack 4 一、webpack 基础认识 官网地址 官网: https://webpack.js.org/ 中文: https://www.we...
Webpack 浅析webpack基础
SillyBoy的博客
07-06 168
文章目录webpack基础1 打包CSS1.1 打包逻辑1.2 打包LESS1.3 打包成独立的CSS文件1.4 添加样式前缀1.5 格式校验1.6 压缩CSS2 打包HTML3 打包JS3.1 打包3.2 JS格式校验4 打包图片5 打包字体6 资源模块（Assent Modules）7 开发服务器（Dev Server）5 打包字体6 资源模块（Assent Modules）7 开发服务器（Dev Server） webpack基础 1 打包CSS 1.1 打包逻辑 非JS的文件打包，需要对应的lo
webpack 浅析一
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
09-23 1107
概念 本 质上，webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。 当 webpack 处理应用程序时，它会递归地构建一个 依 赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。 安装 确保安装了nodejs 项目文件环境 cd mypack // 进入你的项目目录 mypack目录可以随意自己建立 npm init // 初始化项目文件夹 会创建一个packa
webpack 浅析二
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
09-23 1235
webpack 简单笔记 定义 前端项目模块打包器 生成依赖关系 html css js 图片（资源） 自动化 压缩 … 核心概念 入口 entry 出口 output filename 文件名称 path 文件路径 加载器 loader test处理哪些文件 use使用哪些loader加载器 让webpack拥有处理打包非js文件的能力 插件 plugin 使用步骤: 安装 require导入 new 实例化 让webpack 在打包运行过程中，额外处
Webpack 浅析Webpack的几个核心概念
SillyBoy的博客
07-06 103
文章目录webpack核心概念1 入口2 出口3 加载器4 插件5 模式6 模块7 依赖图 webpack核心概念 入口（Entry） 出口（Output） 加载器（Loader） 插件（Plugin） 模式（Mode） 模块（Module） 依赖图（Dependency Graph） 1 入口 打包时，第一个被访问的源码文件。 默认为src/index.js（可以配置）。 webpack通过入口，加载整个项目的依赖。 2 出口 打包之后，输出的文件名称。 默认为dist/main.js（可以配置
【webpack浅析】webpack之深入浅出
jmszl1991的博客
07-23 4256
本文主要讲解两个方面。分别是 深入了解webpack 和 从0开始配置vue项目。 一：深入了解webpack 1、webpack干什么的 总的来说，webpack是一个资源综合处理中心。这名字起的是不是前无古人，是不是高端大气？！这里我要利用高深的比喻修辞手法和配图（见配图 1.1）大概齐的解释一下webpack。webpack其实可以看做是一个半自动（之所以是半自动，是需要我们自己进行很多的配置）工厂流水线。所有的前端资源，比如 图片，样式，js文件等等，一个接一个排好队伍，整齐划一的进入流...
webpack 浅析-- htmlWebpackPlugin 插件
s310558652的博客
03-17 3532
htmlWebpackPlugin  可以自动的创建 html  文件 动态的引用文件名包含 hash 值得文件 1，使用 npm install html-webpack-plugin --save-dev 安装插件 2，在配置文件中的使用 引用插件 var htmlWebpackPlugin = require('html-webpack-plugin'); 插件简单的配置 mod
webpack 浅析 --命令行安装编译
s310558652的博客
03-14 502
webpack 在web 项目中的运用 1，下载安装node.js    https://nodejs.org/en/  2，打开dos窗口 3，进入项目跟目录下 npm init 初始化 4，初始化完成后使用npm install webpack --save-dev 5，安装成功会在项目目录下出现package.json 文件 和node_modules 文件夹
webpack4.x CommonJS模块化浅析
10-17
主要介绍了webpack4.x CommonJS模块化浅析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅析webpack-bundle-analyzer在vue-cli3中的使用
10-16
主要介绍了webpack-bundle-analyzer在vue-cli3中的使用,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
10-16
而 `webpack-bundle-analyzer` 插件则是用来分析项目打包后的文件大小，帮助开发者识别出哪些模块占用了最多的空间，从而进行针对性的优化。这篇文章将详细解析如何在 Vue CLI 3 项目中配置并使用 `webpack-bundle-...
Nuxt 应用的三种运行模式（五）
qq_35876316的博客
06-26 539
SPA 模式是最常见的 Web 应用模式，整个应用在加载完成后，用户的操作不会引发页面跳转，而是通过 JavaScript 动态更新页面内容。
uniApp vue2 vue3配置代理
最新发布
小白变怪兽
06-28 320
【代码】uniApp vue2 vue3配置代理。
React useImperativeHandle Hook
hawk2014bj的博客
06-26 696
useImperativeHandle 在 React 为我提供了一个可以为 ref 绑定处理方法的 hook，useImperativeHandle 源码中可以看到实现了绑定以及清理的逻辑。
ONLYOFFICE 文档开发者版 8.1：API 更新
m0_68274698的博客
06-26 841
随着版本 8.1 新功能的发布，我们更新了编辑器、文档生成器和插件的 API，并添加了 Office API 板块。阅读下文了解详情。
JavaScript的学习之图片的切换
人生苦短
06-27 703
这节的JS图片切换的学习就告一段落！添加JS代码，让它实现图片切换的功能。点击按钮可以切换上一张和下一张。随便去网上找几张图片素材。
webpack webpack.defineplugin
08-25
Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具。它可以将应用程序的不同模块依赖关系转化为静态资源，并且可以通过配置进行自定义的处理。 webpack.DefinePlugin 是 Webpack 提供的一个插件，用于在编译过程中创建全局常量。它允许我们在代码中定义一个全局变量，这个变量在编译时会被替换为指定的值。这在需要根据环境来进行条件编译时非常有用，比如根据开发环境和生产环境来切换不同的配置项。 使用 webpack.DefinePlugin 插件，你可以在 webpack 的配置文件中指定需要定义的常量和对应的值。在编译过程中，这些常量会被替换为指定的值，从而影响到代码的执行逻辑。 例如，你可以使用 webpack.DefinePlugin 来定义一个全局的 API_BASE_URL 变量，根据环境的不同来设置不同的值： ``` const webpack = require('webpack'); module.exports = { // ...其他配置项 plugins: [ new webpack.DefinePlugin({ API_BASE_URL: JSON.stringify(process.env.NODE_ENV === 'production' ? 'http://production-api.com' : 'http://development-api.com') }) ] }; ``` 在代码中，你可以通过使用 API_BASE_URL 变量来获取对应的值： ```javascript console.log(API_BASE_URL); // 在编译时会被替换为配置中指定的值 ``` 这样，你可以根据不同的环境来设置不同的 API 地址，而不需要手动修改代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值