Webpack之Shimming

引入

首先在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'
            }
        ]
    }
}