ProvidePlugin 通过编译时静态注入 import/require 实现变量自动加载，支持默认导出、具名导出及别名路径，需配合 ESLint 全局声明避免 no-undef 报错。
在 Webpack 中用 ProvidePlugin 实现自动加载模块，核心是让指定的变量名（如 $、_、Vue）在任意模块中直接可用，无需反复 import。它不是“全局挂载到 window”，而是由 Webpack 在编译时静态注入 require/import 语句，本质是语法糖级别的自动引入。
配置 ProvidePlugin 插件
在 webpack.config.js 的 plugins 数组中添加：
- 基础写法：直接映射标识符到模块路径，适用于默认导出（CommonJS 或 ES 模块的
export default）
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
dayjs: 'dayjs'
})
]
};
- ES 模块默认导出需显式指定
default属性（否则会报“xxx is not a constructor”等错误）
new webpack.ProvidePlugin({
Vue: ['vue/dist/vue.esm-bundler.js', 'default'],
React: ['react', 'default']
});
- 导入具名导出（named export）时，同样通过数组指定路径和属性名
new webpack.ProvidePlugin({
cloneDeep: ['lodash', 'cloneDeep'],
debounce: ['lodash', 'debounce']
});
确保 ESLint 不报未定义错误
ProvidePlugin 只影响运行时代码注入，不影响静态检查。若不配置 ESLint，会触发 '$' is not defined (no-undef) 报错。
- 在
.eslintrc.js中添加全局变量声明
module.exports = {
globals: {
$: 'readonly',
_: 'readonly',
Vue: 'readonly'
}
};
- 或在
package.json的eslintConfig.globals字段里配置（注意 JSON 不支持注释）
"eslintConfig": {
"globals": {
"$": true,
"_": true,
"Vue": true
}
}
配合别名 alias 提升可维护性
当要注入的模块路径较长（如本地工具函数），建议结合 resolve.alias 使用，避免硬编码路径：
立即学习“Java免费学习笔记（深入）”；
- 先在
resolve.alias中定义简短路径别名
resolve: {
alias: {
'@utils': path.resolve(__dirname, 'src/utils')
}
}
- 再在 ProvidePlugin 中引用别名
new webpack.ProvidePlugin({
utils: ['@utils/index', 'default'],
request: ['@utils/request', 'default']
});
常见典型用法示例
以下场景能显著减少样板代码：
- 全局注入 Vue Composition API 工具函数（搭配工厂函数封装）
- 注入 Vuex 的
useStore、Vue Router 的useRouter等组合式 API - 注入第三方库如
axios、dayjs、qs，使组件内直接调用 - 注入自定义工具类（如
ApiService、Storage），统一管理接口或本地存储逻辑
例如，在组件中可直接写：
export default {
mounted() {
this.$message.success('加载完成');
const data = _.filter(this.list, { status: 'active' });
api.fetchUser().then(...);
}
};
而无需顶部写一堆 import。
