webpack中shimming的概念
在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这个概念很宽泛，涉及到的东西也非常多。
