How can i pass webpack environment variables in html?

When using Webpack for project building, it is often necessary to use environment variables within the project, such as different configurations for development and production environments. Webpack provides multiple methods to pass environment variables to HTML, and I will detail several commonly used approaches.

1. Using the DefinePlugin Plugin

Webpack's built-in DefinePlugin allows you to create global constants that can be configured during compilation. This is useful for enabling different behaviors between development and production builds.

Configuration Method:

In the webpack.config.js file, configure DefinePlugin:

javascript
const webpack = require('webpack');

module.exports = {
  // Other configurations ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

After this configuration, you can access environment variables in your JavaScript code using process.env.NODE_ENV.

To directly use these variables in HTML files, attach them to the window object in the entry file and access them via JavaScript.

For example, in the entry file index.js:

javascript
window.myAppEnv = {
  NODE_ENV: process.env.NODE_ENV
};

Then use it in the HTML file:

html
<script>
  if (window.myAppEnv.NODE_ENV === 'production') {
    // Production-specific logic
  }
</script>

2. Using HtmlWebpackPlugin

HtmlWebpackPlugin is a widely adopted Webpack plugin that generates HTML files and injects script and link tags into the output.

To use environment variables in the HTML template, modify the HtmlWebpackPlugin configuration in your Webpack setup.

Configuration Method:

javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Other configurations ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html',
      environment: process.env.NODE_ENV
    })
  ]
};

In the HTML template file template.html, use it as follows:

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My App</title>
</head>
<body>
    <script>
        if ('<%= htmlWebpackPlugin.options.environment %>' === 'production') {
            // Production-specific logic
        }
    </script>
</body>
</html>

3. Using Environment Variable Files (e.g., .env)

For complex projects requiring multiple environment variables, use libraries like dotenv to manage configurations. Create separate .env files for different environments and combine dotenv with DefinePlugin in Webpack to pass configurations into your application.

Example Configuration:

First, install dotenv:

bash
npm install dotenv

Then configure it in webpack.config.js:

javascript
require('dotenv').config();
const webpack = require('webpack');

module.exports = {
  // Other configurations ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  ]
};

With these methods, you can pass environment variables to HTML based on your requirements, enabling environment-specific operations.

2024年6月29日 12:07 回复

1个答案

1. Using the DefinePlugin Plugin

2. Using HtmlWebpackPlugin

3. Using Environment Variable Files (e.g., .env)

你的答案