Webpack之Shimming

最新推荐文章于 2023-04-24 12:24:50 发布

Meskjei

最新推荐文章于 2023-04-24 12:24:50 发布

阅读量197

点赞数

分类专栏： Webpack 前端文章标签： Webpack Shimming

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/100232590

版权

前端同时被 2 个专栏收录

70 篇文章

订阅专栏

Webpack

18 篇文章

订阅专栏

本文探讨了Webpack打包后的模块耦合度低导致的问题，即在不同模块间无法共享全局变量的情况。通过引入lodash库作为示例，详细讲解了如何使用Webpack的ProvidePlugin插件来全局提供lodash，以及如何利用imports-loader使模块内的this指向window对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入

首先在index.js内写如下内容：

import _ lodash from 'lodash';
import { test } from './test';
console.log(_.join(['a','b','c'], ''));

然后在test.js中：

console.log(_.join(['1','2','3'], ''));

打包后在浏览器中打开，控制台是会输出一个错误的。错误是说“_”是未定义的。明明我们在index.js中引入了lodash为什么还说未定义呢？

原因在于Webpack打包之后，各模块之间耦合度非常低，模块中引入的东西只能在本模块内生效。

要想解决这个问题，可以在test.js顶部添加一行代码将lodash重新引入。

不过如果使用的是第三方模块，模块内使用了大量的全局变量该怎么办？

这就需要用到ProvidePlugin这个插件了。

使用

在Webpack的配置文件中配置：

const webpack = require('webpack');
module.exports = {
    plugins: [
        webpack.ProvidePlugin({
            _: 'lodash'
        })
    ]
}

这样配置之后，Webpack遇到“_”就会自动引入lodash。

this

在模块中，this并不是指向window对象，而是指向module.exports。

如果我们想让this指向window对象，我们需要用到imports-loader

在配置文件中配置：

{
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'imports-loader?this=>window'
            }
        ]
    }
}