webpack高级概念，shimming (预置依赖)(系列十)

以 jquery 为例，代码如下

// index.js

import $ from 'jquery'
$('body').html('HHAHAH')
import func from './test.js'
func()

// test.js 

export default function func() 
{ 
　　$('body').append('<h1>2</h1>')
 }

当你不在test.js中引入 import $ from 'jquery'

打包之后，那么浏览器访问的时候，会报错（变量隔离）

test.js:5 Uncaught ReferenceError: $ is not defined

这个时候就需要使用垫片功能，在webapck配置文件中配置

const webpack = require('webpack')

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery'
  })
]

 

当你加上这段代码后，模块在打包的时候，发现你使用了 $ 就会在test.js模块顶部自动加入 import $ from 'jquery'

其他关于 shimming 的内容参考 webpack 官网 shimming