首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
模块化概述
入口文件
非模块化文件打包
AMD模块打包
CommonJS模块打包
Node模块和NPM
UMD模块打包
CLI与API使用模式
基本配置项
文件分片
CommonChunks插件
高级配置项
使用Loader
bundle-loader
exports-loader
imports-loader
expose-loader
TypeScript与Vue
当前位置:
首页>>
技术小册>>
webpack指南
小册名称：webpack指南
imports，顾名思义是导入的意思，这个loader的作用与exports-loader刚好相反，是用来将其它模块导入到当前模块中。这个loader常常在处理一些非模块化规范编写的文件时被用到。 ## 背景 举个简单的例子，有模块`b`，依赖全局变量`window.a`，那么在没有使用模块化规范的情况下，有可能它的代码中会直接写`a`： ```javascript // 模块b直接依赖全局变量a a.xxx(); ``` 而如果`a`经过webpack打包，则很有可能不会暴露全局变量，此时就需要使用imports-loader来对`a`进行导入。 ## 使用 > todo:例子 ```javascript require('imports?$=jquery!./example.js'); require('imports?$=jquery,angular,config=>{size:50}!./file.js'); ``` ## 典型使用场景 - 为jQuery插件注入$变量 `imports?$=jquery` - 自定义angular `imports?angular` - 让umd模块检测不到define方法从而避免使用amd规范 `imports?define=>false` - 将模块中的`this`还原为`window` `imports?this=window` 一目了然，不再解释。
上一篇：
exports-loader
下一篇：
expose-loader
该分类下的相关小册推荐：
Webpack零基础入门
全解webpack前端开发环境定制
Webpack实战：入门、进阶与调优(上)
Webpack实战：入门、进阶与调优(下)
Webpack实战：入门、进阶与调优(中)
