首页
前端开发
Webpack
html-webpack-inject-env-plugin浏览器环境变量注入插件

html-webpack-inject-env-plugin浏览器环境变量注入插件

0 次浏览 0 条评论
zip
zip

环境变量的注入有多方式，但在前端项目里，要想在浏览器里直接用到这些变量，配置得漂亮还真不容易。html-webpack-inject-env-plugin就挺实用的，专门帮你把变量塞到window.env下面，前端代码直接拿来用，省心。

Webpack 打包时，它会把你设定的环境变量注入进最终生成的index.html里，在浏览器端变成一个window.env对象，比如：window.env.API_URL，想怎么用都行。这在前后端分离或者多环境部署时，真的香。

安装也简单，npm install --save-dev html-webpack-inject-env-plugin，在webpack.config.js里配置一下插件，把你想注入的变量都放进去。代码长这样：

const HTMLWebpackInjectEnvPlugin = require('html-webpack-inject-env-plugin');
const env = {
  API_URL: 'http://api.example.com',
  LOG_LEVEL: 'debug',
};


plugins: [
  new HtmlWebpackPlugin(),
  new HTMLWebpackInjectEnvPlugin(env),
];

构建完后，你的index.html里就多了个window.env，JS 直接访问window.env.API_URL就行。不用再通过process.env那些服务端变量转来转去了，响应也快，代码也简单。

如果你项目要支持多个环境，推荐你搭配DefinePlugin一起用，或者用个像env-cmd这样的工具做变量管理，注入时更灵活。还可以看看nuxt-env，在 Nuxt 里做类似事。

，这插件对构建现代 Web 应用挺有，尤其是做多环境部署的时候。如果你在项目里还为环境变量头疼，可以试试它，配置一次用到爽～

zip 文件大小：26.02KB