复习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作一些配置