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

转载于:https://juejin.im/post/5cdabc755188257e680485e9