如何从我的 webpack 2 配置中创建/生成/导出文件以在我的 React 代码中使用？

Posted 2023-03-08

【中文标题】如何从我的 webpack 2 配置中创建/生成/导出文件以在我的 React 代码中使用？

【英文标题】：How to create/generate/export a file from my webpack 2 config to be used inside of my React code?

【发布时间】：2017-11-06 08:35:34

【问题描述】：

我将NODE_ENV 变量从package.json 传递到我的webpack.config，以便返回一个包含本地或生产API 端点的对象。

1) 包.json

"scripts": 
    "dev": "NODE_ENV=development webpack-dev-server --history-api-fallback",
    "prod": "NODE_ENV=production webpack -p",
    "build": "NODE_ENV=production webpack -p"

2) 端点.js

function endpoints(env) 
    let prefix = env === 'development' ? 'http://localhost' : '';

    return 
        "login": `$prefix/app/api/login`
    


module.exports = endpoints;

3) webpack.config

const webpack = require('webpack')
const htmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const dist = path.resolve(__dirname, "dist");
const src = path.resolve(__dirname, "src");
const endpoints = require("./src/endpoints");
const api = endpoints(process.env.NODE_ENV);

console.log('webpack api', api);

module.exports = 
  context: src,
  entry: [
    "./index.js"
  ],
  output: 
    path: dist,
    // ....

---

在下面我可以看到 const api 的 console.log。

---

现在我的问题是，我现在如何生成或导出一个实际文件 api 以在我的 src/services/api 文件中使用：

import axios from 'axios'
// import api from '../../webpack.config' <-- ?
// import api from '../../api.js <-- ?

const log = (method, err) => 
    console.error(`%c$method`, 'background: #393939; color: #F25A43', err);
    return null;
;

export const userLogin = (username, password) => 
    const post_data =  username, password ;
    return axios.post('http://localhost/app/api/login', post_data)  // <-- api to be used here
        .then(res => res)
        .catch((err) => log('api.userLogin', err));
;

【参考方案1】：

我认为这是XY problem。您可以使用一点 Node 生成文件（类似于 fs.writeFileSync('api.js', contents)，或者您可以使用一些 shell 脚本来完成，但您也可以使用 DefinePlugin 在代码中使用 env（例如：@987654325 @。然后你就可以直接在你的代码中访问env。

【讨论】：

哦，太好了！现在查看 DefinePlugin，这听起来是最干净的方法。