复习webpack4之Shimming

292 阅读1分钟

之前学习过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做一些配置