在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. Flutter 原生TabBar切换标签页示例

    效果图: 代码如下: import 'package:flutter/material.dart'; class TabsTestPage extends StatefulWidget { _Tabs ...

  2. selenium UI自动化解决验证码的五种方法

    TesseractPy3.py #coding=utf-8 import os import subprocess import traceback import logging from PIL i ...

  3. MATLAB知识-解决因缺少libsvm 而运行出现Y must be a vector or a character array.

    matlab版本R2014b 最近运行一个使用svmtrain的程序,出现以下错误: 这是因为是在设定路径里面没有libsvm.辛亏有一位师姐的电脑里面有libsvm的包,我直接用了,这样就不需要下载 ...

  4. php 生成32位随机字符串 用于支付验证 用户注册

    //32位随机字符串 function randstrpay($length=32) { $rand=''; $randstr= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567 ...

  5. bzoj3624（Apio2008）:免费道路

    题目↓ Sample Input 5 7 2 1 3 0 4 5 1 3 2 0 5 3 1 4 3 0 1 2 1 4 2 1 Sample Output 3 2 0 4 3 0 5 3 1 1 2 ...

  6. Python hashlib加密模块

    hashlib模块 简介: hashlib模块是一个提供了字符串加密功能的模块,包含MD5和SHA的加密算法.具体的加密支持有: MD5,sha1,sha224,sha256, sha384, sha ...

  7. java访问磁盘文件

    转载,务必写上原文链接 !(尊重与你分享知识的人) 目录 文件 File 对象 VS FileDescriptor 对象 文件讲解java访问磁盘文件过程 fileReader.read() 图解ja ...

  8. golang以服务方式运行

    golang开发的二进制程序,一般需要长期后台运行的,在linux上可以用supervisor或upstart或systemd等第三方守护进程来实现.其实golang自己也可以实现以服务的形式常驻后台 ...

  9. popcorn-js视频Video框架简单用法

    <div> <video class="video" id="ourvideobig" preload="auto" co ...

  10. hdu 4324

    思路待整理 #include<cstdio> #include<iostream> #include<vector> #include<queue> # ...