在webpack打包过程中会去做一些代码上的兼容，或者打包过程的兼容，比如之前使用过的babel-polyfill这个工具，他解决了es6代码在低版本浏览器的兼容。这就是webpack中的垫片。他解决打包过程中一些兼容性的问题。这些兼容性的问题不仅仅是浏览器上的兼容性问题。还有一些其他的兼容性问题，我们举几个例子
index.html
<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">

　　　　<title>html template</title>

　　</head>

　　<body>

　　　　<div id='root'></div>

　　</body>

</html>

index.js

import _ from 'lodash';

import $ from 'jquery';

import { ui } from './jquery.ui';

ui();

const dom = $('<div>');

dom.html(_.join(['1','1'],'---'));

$('body').append(dom);

jquery.ui.js

export function ui(){

　　$('body').css('background', '#abcdef');

}

这个时候发现ui()，没有正确的运行。报错了jquery.ui.js里面找不到$。在index.js引入了$。但是为什么jquery.ui.js里面找不到$呢？原因很简单，在webpack中，是基于模块打包的。模块里面这些变量只能在这个模块的文件里面被使用。而换了一个文件，再想使用上面文件的比那里，那是不可能的。通过这种形式，模块与模块之间不会有任何的耦合。这样出了问题，直接在自己的模块找问题就行了。不会因为一个模块而影响到另外一个模块。所以变量是隔离的。那么想要使用这个$，就必须在jquery.ui.js的顶部去引入jquery。

那么这个jquery代码不是我的业务代码，他是第三方的库。是别人写的。所以在源码里面去加入jquery的引入是不太现实的。这个时候我们可以用一个垫片的形式来解决这个问题。在webpack.common.js里面引入webpack。webpack自带一个插件，ProvidePlugin。在这里就可以搞一点事情了。
webpack.common.js
const webpack = require('webpack');

module.exports = {

　　plugins: [

　　　　// webpack自带的插件

　　　　new webpack.ProvidePlugin({

　　　　　　// 意思是如果我的一个模块中使用了$这样一个字符串，我就会在模块中自动的引入jquery这个

　　　　　　$: 'jquery'

　　　　})

　　],

}

配置好了之后，重启服务。npm run dev。那么在没有引入jquery的情况下也能用，因为底层自动引入了。这个时候我们就不需要在文件中引入_,$等

webpack.common.js
const webpack = require('webpack');

module.exports = {

　　plugins: [

　　　　// webpack自带的插件

　　　　new webpack.ProvidePlugin({

　　　　　　// 意思是如果我的一个模块中使用了$这样一个字符串，我就会在模块中自动的引入jquery这个

　　　　　　$: 'jquery',

　　　　　　_: 'lodash'

　　　　})

　　],

}

index.html

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">

　　　　<title>html template</title>

　　</head>

　　<body>

　　　　<div id='root'></div>

　　</body>

</html>

index.js

import { ui } from './jquery.ui';

ui();

const dom = $('<div>');

dom.html(_.join(['1','1'],'---'));

$('body').append(dom);

jquery.ui.js

export function ui(){

　　$('body').css('background', _.join(['#abcdef'],''));

}

重启服务，，没问题。

再举个例子
index.html

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">

　　　　<title>html template</title>

　　</head>

　　<body>

　　　　<div id='root'></div>

　　</body>

</html>

index.js

console.log(this === window);

打印出来的是false,也就是src里面的this不指向window。那我就是想让他指向window，怎么做呢？先装一个插件

npm install imports-loader -D
安装好之后再对webpack做一些配置。
module.exports = {

　　module: {

　　　　rules: [{

　　　　　　test: /\.js$/,

　　　　　　exclude: /node_modules/,

　　　　　　use: [{

　　　　　　　　loader: 'babel-loader'

　　　　　　}, {

　　　　　　　　loader: 'imports-loader?this=>window'

　　　　　　}],

　　　　}

　　}

}

在加载js的时候多加载一个loader，叫imports-loader，将this指向window。这个时候打印出来的就是true了。说明模块里面的this就指向window了。实际上也是修改webpack一些默认的行为。或者说实现webpack原始打包无法实现的一些效果。这种行为都叫做shimming。垫片的行为。

shimming这个概念很宽泛，涉及到的东西也非常多。

webpack中shimming的概念的更多相关文章

  1. 初识webpack——webpack四个基础概念

    前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...

  2. 【转】webpack中关于source map的配置

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  3. Webpack中的sourcemap

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  4. Webpack 学习记录之概念

    1 什么是webpack webpack是一个模块打包器,可以递归的构建一个依赖关系图,其中包含每个程序需要的每个模块,然后将所有模块打包成一个或多个bundle.他和其他的工具最大的不同在于他支持c ...

  5. webpack安装与核心概念

    安装webpack webpack核心概念:入口.输出.加载器.插件.模块.模式 一.安装webpack 1.安装webpack之前需要安装nodejs环境,在使用nodejs环境自带的包管理工具np ...

  6. webpack 四个核心概念

    webpack 是当下最热门的前端资源模块化和打包工具.它可以将许多松散的模块(如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.Coffeescript. LES ...

  7. webpack 中，module，chunk 和 bundle 的区别是什么？

    前两天为了优化公司的代码打包项目,恶补了很多 webpack4 的知识.要是放在几年前让我学习 webpack 我肯定是拒绝的,之前看过 webpack 的旧文档,比我们内部项目的文档还要简陋. 但是 ...

  8. Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  9. WebLogic 中的基本概念

    完全引用自: WebLogic 中的基本概念 WebLogic 中的基本概念 上周参加了单位组织的WebLogic培训,为了便于自己记忆,培训后,整理梳理了一些WebLogic的资料,会陆续的发出来, ...

随机推荐

  1. WordPress获取特色图像的链接地址

    为什么要获取WordPress的特色图像呢? 这主要是因为,我们已经写好了静态模板文件,只有获取WordPress特色图像地址插入进去就可以了,非常方便. 还有就是有的时候,我们需要设置图片的宽度为1 ...

  2. selenium3 web自动化测试框架 四：Unittest介绍及项目实战中的运用

    unittest介绍及运用,可以参考之前写的文章,除了未结合web自动化演示,基础知识都有了 https://www.cnblogs.com/wuzhiming/p/8858305.html unit ...

  3. （CVE-2016-5195）脏牛本地提权

    简要分析 该漏洞具体为,get_user_page内核函数在处理Copy-on-Write(以下使用COW表示)的过程中,可能产出竞态条件造成COW过程被破坏, 导致出现写数据到进程地址空间内只读内存 ...

  4. Ie浏览器请求400错误,谷歌火狐等浏览器正常请求.

    做项目的时候,遇到一个小的问题.一个location.href="请求的url"在其它浏览器上是可以正常请求的.但是在ie浏览器上确出现奇怪的http请求400错误,我们先来对于h ...

  5. 批量添加删除Windows server DNS服务 恶意域名 * A记录 指向 127.0.0.1（2019年6月5日更新）

    下载链接:https://pan.baidu.com/s/1OUHyvnIfXYF0PdiT-VRyHw  密码:7gjj 注意!本解决方案在本地的Windows server服务器上把恶意域名指向1 ...

  6. malloc/free和new/delete详解与应用

    C++面试经常会问到关于malloc/free和new/delete的区别,网上有不同版本的解释,这里总结下并加上个人理解和使用. 两者相同点 1.都可以申请动态堆内存. 两者不同点 1.new/de ...

  7. c++ string类型成员变量在调用构造函数后未能正确赋值

    struct RelItem{ string segName; Elf32_Rel* rel; string relName; RelItem(string seg, int addr, string ...

  8. springboot整合thymeleaf——引用静态资源

    原html src="/css/index.css" thymeleaf中,th:src="@{/css/index.css}"

  9. GPIO 输出—使用固件库点亮 LED

    编程要点 1. 使能 GPIO 端口时钟:  2. 初始化 GPIO 目标引脚为推挽输出模式:  3. 编写简单测试程序,控制 GPIO 引脚输出高.低电平. LED的电路图 过程: 1.拷贝一个库函 ...

  10. 使用Duilib开发Windows软件（1）——HelloWorld

    我使用的是网易版本: https://github.com/netease-im/NIM_Duilib_Framework 时间是2019-11-28,作者最新的提交如下图: 运行官方示例程序 下载完 ...