webpack打包时使用import引入element,element地址信息不会被打包到budle中而axios就会呢?

Webpack 打包时,对于 import 引入的库(例如 element),其地址信息不会被打包到 bundle 中,这是因为库的地址信息是在运行时动态解析的,而不是在编译时确定的。

当你在代码中使用 import 引入一个库时,Webpack 会将其转换为一个动态的 require 语句,而这个 require 语句会在运行时解析并加载库的模块。因此,库的地址信息不会直接出现在最终的 bundle 中。

相比之下,Axios 是一个提供 HTTP 请求功能的库,它需要在编译时确定其地址信息,因为 HTTP 请求是发生在编译期间而不是运行期间的操作。因此,Axios 的地址信息会被打包到 bundle 中。

总结来说,Webpack 打包时是否将库的地址信息打包到 bundle 中,取决于库的使用方式和编译时的需求。对于运行时动态加载的库,其地址信息不会被打包到 bundle 中;而对于需要在编译时确定地址信息的库(如 Axios),其地址信息会被打包到 bundle 中。

那么webpack打包时如何引入将编译时的库的地址信息不被打包到bundle中??

方式一:在index.html中引入,webpack打包时排除axios打包

复制代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

externals: {
        'axios': 'axios'
    },

方式二:使用import方式引入axios,使用Webpack的alias配置选项来设置库的别名,这样在代码中就可以使用别名来引入模块,而不需要直接使用完整的路径。这样,即使库的地址信息在编译时被解析,也不会被打包到bundle中。

复制代码
import axios from 'axios'

resolve: {
        alias: {
            '@': resolve('src'),
            'axios': resolve('node_modules/axios/dist/axios.min.js'),
        }
    },
相关推荐
八月ouc2 天前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
街尾杂货店&2 天前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
jiangzhihao05153 天前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
_孤傲_4 天前
webpack实现常用plugin
前端·webpack·node.js
Jonathan Star4 天前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
细节控菜鸡5 天前
Webpack 核心知识点详解:proxy、热更新、Loader与Plugin全解析
前端·webpack·node.js
dcloud_jibinbin6 天前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
颜酱7 天前
理解 Webpack 的构建过程(实现原理),并实现一个 mini 版
前端·javascript·webpack
teeeeeeemo8 天前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
小小前端_我自坚强9 天前
2025Webpack、Vite、Rollup详解
webpack·vite·rollup.js