在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. SpringCloud入门01之基础知识

    一.Spring Cloud 什么是spring cloud, 为什么要使用微服务架构? 参考度娘 Spring Cloud是一系列框架的有序集合, 它利用Spring Boot的开发便利性巧妙地简化 ...

  2. 到处抄来的SUCTF2019 web wp

    0x01 EasySQL 这是一个考察堆叠注入的题目,但是这道题因为作者的过滤不够完全所以存在非预期解 非预期解 直接构造 *,1 这样构造,最后拼接的查询语句就变成了 select *,1||fla ...

  3. 最新 吉比特java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.吉比特等10家互联网公司的校招Offer,因为某些自身原因最终选择了吉比特.6.7月主要是做系统复习.项目复盘.LeetCo ...

  4. redis相关操作命令

    一.相关命令列表: 命令原型 时间复杂度 命令描述 返回值 KEYS pattern O(N) 时间复杂度中的N表示数据库中Key的数量.获取所有匹配pattern参数的Keys.需要说明的是,在我们 ...

  5. Asp.Net Core中的角色

    在前面介绍中我们知道了Asp.Net Core Identity中创建用户使用到的类UserManager<IdentityUser>,同样的,创建角色我们需要使用RoleManager& ...

  6. [转帖]为微软效力15年的微软前员工解释Windows 10为什么问题这么多

    为微软效力15年的微软前员工解释Windows 10为什么问题这么多 https://www.cnbeta.com/articles/tech/892109.htm . 测试团队已经被裁撤 . 自动化 ...

  7. Redis 常用命令学习三：哈希类型命令

    1.赋值与取值命令 127.0.0.1:6379> hset stu name qiao (integer) 1 127.0.0.1:6379> hset stu sex man (int ...

  8. 第三坑：jar包编译版本

    这个是之前往was上发应用的时候踩的一个坑,当时我们知道was的jdk版本是1.6,然后我们是用1.7的jdk,编译版本选的是1.6,然后放上去不对,我们以为是编译的问题,然后又下载了1.6的jdk, ...

  9. 帮助理解Docker，生动装逼介绍Docker

    为了帮助理解Docker,整理了一下 Docker组成的三个基本概念: 仓库(Repository) 镜像(Image) 容器(Container) 仓库:(Repository)——集中存放镜像文件 ...

  10. Html大段文本自适应换行显示-SSM

    只处理前端: <style> .ctl{ table-layout:fixed } .ctl td{ word-break:break-all } </style> <d ...