// index.js中引入的lodash和jquery仅限于在改模块内部使用
import _ from 'lodash';
import $ from 'jquery';
import {ui} from './jquery.ui';
ui();
const dom = $('div');
dom.html(_.join(['hello', 'webpack666'], '---'));
$('body').append(dom);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
export function ui() {
// 这里的$找不到
$('body').css('background', 'red');
}
1
2
3
4
2
3
4
ProvidePlugin
new webpack.ProvidePlugin({
// 发现代码中使用了$，则会自动在代码引入jquery模块
$: 'jquery',
_: 'lodash',
// 在代码中使用_map，相当于使用lodash的map方法
_map: ['lodash', 'map']
})
1
2
3
4
5
6
7
2
3
4
5
6
7
export function ui() {
$('body').css('background', 'red');
_map([1, 2], item => console.log(item));
}
1
2
3
4
2
3
4
imports-loader
yarn add imports-loader
1
console.log(this);
console.log(this === window);
1
2
2
不使用imports-loader之前打包：this默认指向模块自身。
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'imports-loader?this=>window' // 设置模块中的this指向window
}
]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10