DaMeng

webpack 中 imports-loader exports-loader expose-loader 区别

发表于 更新于 分类于 ，

1 imports-loader

1.1 作用

通过 imports-loader 能够给匹配文件自动导入配置模块。比如，对于某个依赖 jquery 的 a.js，通过 imports-loader 导入 a.js 时，webpack 会自动在 a.js 文件中添加 import jquery 语句，而省去了手动导入 jquery 的过程。

1.2 安装

1
npm install imports-loader --save-dev

1.3 使用

1.3.1 inline 方式

index.js

1
2
3
4
5
import "imports-loader?imports=default|jquery|$!./lib.js";

// 上面语句会在 lib.js 中添加如下代码:
//
// import $ from "jquery";

1.3.2 配置文件方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require("path");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
	},
	mode: "development",
	module: {
		rules: [
			{
				test: require.resolve("./src/index.js"),
				use: {
					loader: "imports-loader",
					options: {
						imports: ["default jquery $"],
					},
				},
			},
		],
	},
};

index.js 中会添加如下语句：

1
import $ from 'jquery';

2 exports-loader

2.1 作用

通过 exports-loader 可以在源码中添加 exports 语句。适用于源码中没有 exports 语句的旧库。

2.2 安装

1
npm install exports-loader --save-dev

2.3 使用

2.3.1 inline 方式

1
2
3
4
import { myFunction } from 'exports-loader?exports=myFunction!./file.js';
// 上面语句会在 file.js 源码中添加如下语句:

// export { myFunction }

2.3.2 配置文件方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'module',
          exports: 'Foo',
        },
      },
    ],
  },
};

1
2
3
4
5
6
// ...
// Code
// ...
//vender.js 中会添加如下语句
export { Foo };

3 expose-loader

3.1 作用

expose-loader 可以将模块添加到全局对象，并使模块参与打包。

3.2 安装

1
npm install expose-loader --save-dev

3.2.1 inline 方式

1
2
import $ from 'expose-loader?exposes[]=$&exposes[]=jQuery!jquery';
//上面代码添加 $ 和 jQuery 变量到全局对象上，在控制台可以通过 window.$ 来使用jquery

3.2.2 配置文件方式

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
 	module: {
		rules: [
			{
				test: require.resolve("jquery"),
				loader: "expose-loader",
				options: {
					exposes: ["$zz", "jQuery"],
				},
			},
		],
	},
};
1
2
3
4
5
6
// 必须用 import 语句导入 $zz 才能使 $zz 添加到全局 window 上
// 
import $zz from "jquery";
import "./test.js"; //test.js 无需再使用 import 语句导入 $zz

$zz("#test1").text("hello");
1
2
3
//test.js 无需再使用 import 语句导入 $zz
$zz("#test2").text("world");