webpack 自动引入常用模块
描述:比如 lodash 这种库,要用时每个 js 文件都需要如下引入
import _ from 'lodash'
console.log(_.join(['1', '2'], '/'))
怎么才能不引入 lodash 也能直接 _.join 等方法来使用 lodash 呢?
方法一: (模块局部引入)
const webpack = require('webpack ')
module.exports = {
...
plugins: [
...
// ProvidePlugn 会自动在打包好的每一个模块内环境中引入 import _ from 'lodash'
new webpack.ProvidePlugin({
'_': 'lodash'
})
]
}
但是有时候我需要全局能取到 window._ , 那应该怎么办呢?
方法二: (全局引入)
(1)添加 expose-loader
module.exports = {
module: {
rules: [
{
test: require.resolve('lodash'),
loader: 'expose-loader',
options: {
globalName: '_', // 全部变量为 _
override: true, // 如果全局有 _ 就覆盖它
}
}
]
}
}
之后只需要打包入口文件引入一下就可以了:
import _ from 'lodash'
console.log(_.join(['1', '2'], '/'))
(2)添加 expose-loader 行内loader
// 使用 expose-loader 全局变量为 _
let _ = require('expose-loader?exposes=_!lodash')
console.log(_.join(['1', '2'], '/'))