webpack打包时配置环境变量

一、常规环境变量配置

使用webpack.DefinePlugin插件来定义全局常量

1. 使用webpack.DefinePlugin定义全局常量

在webpack配置文件中（例如 webpack.config.js）中

const webpack = require('webpack');

module.exports = {
  // ... 其他配置项
  plugins: [
    new webpack.DefinePlugin({
      'process.env.YOUR_ENV_VAR': JSON.stringify('your_value')
    })
  ]
};

这里，我们设置了一个环境变量YOUR_ENV_VAR，并为其赋了一个值your_value。

2. 在Vue静态页面中使用该环境变量

在a.html页面中，你可以通过以下方式访问这个变量：

<script>
  if (process.env.YOUR_ENV_VAR === 'your_value') {
    // 你的代码
  }
</script>

为了在a.html中使用process.env.YOUR_ENV_VAR，a.html应该被Vue和Webpack处理。如果a.html是一个纯静态页面且没有被Webpack处理，这种方式可能不起作用。在这种情况下，你可能需要在构建时动态生成或处理HTML文件。

二、纯静态文件配置环境变量

使用htmlwebpackplugin
可以使用html-webpack-plugin在构建时处理该HTML文件并注入变量

1. 使用npm或yarn安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

2. 在Webpack配置中引入并使用插件

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

module.exports = {
  // ... 其他配置项
  plugins: [
    new HtmlWebpackPlugin({
      template: 'path_to_your_a.html',  // 指定你的a.html文件路径
      filename: 'a.html',  // 输出的HTML文件名，可以保持为a.html
      inject: false,  // 这确保了不自动注入bundle到html中
      templateParameters: {
        YOUR_ENV_VAR: 'your_value'  // 你的环境变量
      }
    })
  ]
};

在a.html 中使用该环境变量

<script>
  var envVar = '<%= YOUR_ENV_VAR %>';
  if (envVar === 'your_value') {
    // 你的代码
  }
</script>

如果你觉得上面的书写方式太复杂，可以使用 htmlwebpackplugin.options配置。

3. 使用htmlwebpackplugin.options方式配置环境变量

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

module.exports = {
  // ... 其他配置项
  plugins: [
    new HtmlWebpackPlugin({
      template: 'path_to_your_a.html',  // 指定你的a.html文件路径
      filename: 'a.html',  // 输出的HTML文件名，可以保持为a.html
      inject: false,  // 这确保了不自动注入bundle到html中
      YOUR_ENV_VAR: 'your_value'  // 设置参数
    })
  ]
};

在a.html模板中引用这个参数

<script>
  var envVar = '<%= htmlWebpackPlugin.options.YOUR_ENV_VAR %>';
  if (envVar === 'your_value') {
    // 你的代码
  }
</script>