webpack 自动引入常用模块

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'], '/'))