简介：npm 包 simple-injector-webpack-plugin 是一个 webpack 插件，它可以让我们在 webpack 打包过程中，往打包后的 JS 文件中自动注入指定的变量或模块，使用该插件可以很方便地解决一些常见问题，比如版本号控制、环境变量控制等。
安装
首先需要安装 simple-injector-webpack-plugin，可以通过 npm 直接进行安装：
npm install --save-dev simple-injector-webpack-plugin
使用
在 webpack.config.js 文件中添加如下配置：
-- -------------------- ---- -------
----- --------------------------- - ------------------------------------------
-------------- - -
-----
-------- -
--- -----------------------------
---------- -
-------- -------
--
-------- -
------- ---------
-- --------
-
--
-
--上面的配置可以往打包后的 JS 文件中注入一个名为 VERSION 的变量，值为 '1.2.3'，以及 jQuery 和 $ 两个模块，分别对应的变量名为 jQuery 和 $。
变量注入
使用该插件可以很方便地实现版本号控制，我们可以在打包时将版本号直接注入到 JS 文件中：
new SimpleInjectorWebpackPlugin({
variables: {
VERSION: '1.0.0'
}
})在 JS 文件中就可以直接引用该变量：
console.log(VERSION); // 输出 1.0.0
模块注入
使用该插件还可以很方便地将常用模块自动注入到 JS 文件中，比如 jQuery：
new SimpleInjectorWebpackPlugin({
modules: {
$: 'jquery'
}
})在 JS 文件中就可以直接使用 $ 变量了：
$('#app').click(function() {
console.log('hello world');
});此时，webpack 会将 jquery 打包进 JS 文件中，并且在全局命名空间中暴露出 $ 变量，从而方便我们在其他地方直接使用。
示例代码
-- -------------------- ---- -------
----- --------------------------- - ------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------
--
-------- -
--- -----------------------------
---------- -
-------- -------
--
-------- -
-- --------
-
--
-
--上面的示例代码中，我们通过 simple-injector-webpack-plugin 插件将版本号注入到了打包后的 JS 文件中，并把 jQuery 模块自动注入到了全局命名空间中。这样我们就可以方便地在其他 JS 文件中使用 jQuery 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b581e8991b448deff2