在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. dozer工具类

    jar:commons-beanutils-1.9.3.jar.commons-lang-2.6.jar.dozer-5.3.2.jar.jcl-over-slf4j-1.7.25.jar.slf4j ...

  2. javascript高德地图放到网页中的方法

    javascript高德地图放到网页中的方法 1 先获取到经纬度http://lbs.amap.com/console/show/picker 2 下面代码直接设置下中心点 和标记点就可以了 < ...

  3. 乐字节Java学习03-path环境变量

    1. path环境变量的作用 保证javac命令可以在任意目录下运行. 2. path配置的两种方案: 方法 一如下: ①点击计算机->右键->属性 ②高级系统设置 ③高级—>环境变 ...

  4. vue-cli开发-搭建项目(一)

    前言 vue-cli是Vue官方提供的命令行工具,可用于快速搭建大型单页应用.集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.建议先熟悉 Vue 本身之后再研究 C ...

  5. Linux下载安装mysql5.7教程

    首先下载mysql 的安装包,可以去官网下载,网址:https://dev.mysql.com/downloads/mysql/ 然后下滑,在这个地方选择你想要安装的版本: 这里我选择的5.7.点击进 ...

  6. 关于db2中listagg函数开发中的体验

    一.首先解释一下可能会查询的基础问题: 1.1db2 “with ur”是什么意思: 在DB2中,共有四种隔离级:RS,RR,CS,UR.以下对四种隔离级进行一些描述,同时附上个人做试验的结果.隔离级 ...

  7. 从MongoDB及mysql 谈B/B+树

    一 B树的由来 B树指的是一类树,包括B-树,B+树,B*树等,是一种自平衡的搜索树,它类似普通的平衡二叉树,不同的一点是B树允许每个节点有更多的子节点.B树是专门为外部存储器设计的,如磁盘,它对于读 ...

  8. PS错误1

    PS错误1 提示要卸载.不用卸载直接安装即可.还保留了之前的设置. 在安装目录下看看有没有安装PS的exe程序.可能有.

  9. PCA降维笔记

    PCA降维笔记 一个非监督的机器学习算法 主要用于数据的降维 通过降维, 可以发现更便 于人类理解的特征 其他应用:可视化:去噪 PCA(Principal Component Analysis)是一 ...

  10. win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总

    win7+cuda+anaconda python+tensorflow-gpu+keras安装成功版本匹配汇总 2019-09-20 15:06:03 wyx100 阅读数 38更多 分类专栏: M ...