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'
            }
        ]
    }
}