Question

我在webpack上有一个带有webpack.config.js文件的反应项目，就像这样

const webpack = require('webpack');

const config = {
  serverBaseUrl: 'http://localhost:3000',
  devtool: "inline-source-map",
  entry:  __dirname + "/app/App.js",
  output: {
    path: "./public/js/",
    publicPath: "/js/",
    filename: "bundle.js"
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      exclude: /node_modules/,
      loader: "babel",
      query: {
        presets: ["es2015","react","stage-0"]
      }
    }]
  },
  devServer: {
    port: 8008,
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  },
}

if (process.env.NODE_ENV === 'production') {
  config.serverBaseUrl = 'http://api.domain.com';
  config.devtool = false;
  config.plugins = [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({comments: false}),
    new webpack.DefinePlugin({
      'process.env': {NODE_ENV: JSON.stringify('production')}
    })
  ];
};

module.exports = config;

我想在另一个js文件中使用config.serverBaseUrl？我该怎么办？

我可以吗

const config = require('./webpack.config.js')

并使用像这样的配置

config.serverBaseUrl

更新：

如果我在另一个文件中使用const= require('config') 我收到了这个错误

ERROR in ./app/components/ComponentBase.js
Module not found: Error: Cannot resolve module 'config' in /Users/username/data/projects/bwe_web/app/components
 @ ./app/components/ComponentBase.js 33:13-30

Answer 1

ICN，为了配合J. Titus声明，您可能应该创建另一个名为Environment.js的JavaScript类并将其导出并使用其中的设置。在JS类的顶部，您可以要求Environment.js，然后只需提取值。保持webpack配置web.pack配置。

'use strict'
var EnvironmentSettings = function(){
   var serverBaseUrl = 'http://api.domain.com';
};

module.exports.EnvironmentSettings = EnvironmentSettings;

然后，对于您需要或想要实现/初始化的任何实现，您只需要在JavaScript类的顶部。

const envSettings = require('EnvironmentSettings');
var api = envSettings.serverBaseUrl

你也应该熟悉一些JS模式。原型模式，揭示原型模式，这将有助于您包括外部课程的教育。

如何使用webpack.config.js自定义配置？

1 个答案: