複習webpack4之Shimming

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.Shimming的做用

假設咱們如今有這樣的場景。

index.js代碼以下：

index.ui.js代碼以下：

若是此時咱們直接打包代碼，是不能執行的，由於index.ui.js中沒有引入jquery，因此不能使用$。不止是本地文件，有可能第三方庫中也引用了jquery，可是咱們直接去改庫的代碼是不太現實的。此時，就能夠用shimming來解決這個問題。

2.配置插件

首先要引入webpack模塊，而後配置插件

插件的意思是：遇到$，就會在模塊中引入jquery，把模塊名命名爲$。即自動幫咱們

import $ from 'jquery';
複製代碼

若是咱們如今只想使用lodash中的join方法，還能夠這麼配置：

這樣配置以後，遇到_join，就會把lodash中的join方法引入到模塊中。

3.Shimming的其餘使用方法

咱們在模塊中打印this，會發現this並非window，它指向的是模塊自己。

而咱們有時候想讓每個模塊的this都指向window，那麼改怎麼辦呢？

這時候就要先安裝一個插件

cnpm install -D imports-loader
複製代碼

而後去對webpack作一些配置