排除配置文件

Question

  

构建一次，部署许多

我有一个React应用程序，它引用了一个配置文件，其变量对于每个环境都是不同的。为了与＃34; build构建一致，部署许多＆＃34;概念，我想从我的webpack构建过程中排除config文件，而是为每个环境导入不同的配置文件。

我怎样才能做到这一点？

这是我的webpack.config.js。

const path = require('path');
const webpack = require('webpack');

const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

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

const srcRoot = path.resolve(__dirname, 'src');
const appRoot = path.resolve(srcRoot, 'app');
const configRoot = path.resolve(srcRoot, 'fs_config.js');

module.exports = (env) => {

  const isDev = env == 'development';

  return {
    context: path.resolve(__dirname),
    entry: {
      main: './src/app/main.js',
      vendor: [
        'react', 'react-dom', 'jquery', 'moment',
        'react-bootstrap', 'lodash'
      ]
    },
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: isDev ? 'js/[name].bundle.js' : 'js/[name].[hash].bundle.js',
      sourceMapFilename: isDev ? 'js/[name].bundle.map' : 'js/[name].[chunkhash].bundle.map',
      chunkFilename: isDev ? 'js/[id].chunk.js' : 'js/[id].[chunkhash].chunk.js',

      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',

          query:{
            "presets": [
              ["es2015", {"modules": false}],
              "stage-2",
              "react"
            ],
            "plugins": [
              "react-hot-loader/babel"
            ]
          },

          exclude: [
            /node_modules/
          ],
        },

        {test: /\.css$/, loader: "style-loader!css-loader"},

        {test: /\.json$/, loader: "json-loader"},

        {
          test: /\.(jpe?g|png|gif)$/,
          loader: 'file-loader',
          query:{
            name: 'assets/img/[name].[ext]'
          }
        },
      ]

    },
    resolve: {
      extensions: [".js", ".jsx"],

      modules: [
        appRoot,
        'node_modules'
      ],
    },
    devServer: {
      contentBase: path.join(__dirname, "dist"),
      port: 2200,
      disableHostCheck: true,
      compress:true,
      publicPath: '/',
      stats: "minimal"

    },
    stats: "minimal",
    performance: {
      hints: false
    },
    devtool: isDev ? 'eval' : 'cheap-source-map',

    plugins: [
      new CleanWebpackPlugin(['dist']),
      new CopyWebpackPlugin([
        {from: './src/index.html'},
        {from: './src/assets', to: './assets'},

      ]),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      new HtmlWebpackPlugin({
        template: path.resolve(srcRoot, 'index.html'),
        chunksSortMode: 'dependency'
      }),

      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: 'js/[hash].vendor.js',
        minChunks: Infinity,
      }),

      new webpack.DefinePlugin({
        process: {
          env: {
            NODE_ENV: isDev ? '"development"' : '"production"'
          }
        }
      }),


    ].concat(
      !isDev
        ?
        [
          new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false
            }
          }),
        ]
        :
        []
    ),
    node: {
      console: true,
      fs: 'empty',
      tls: 'empty',
      net: 'empty',
    },
    externals: [{
        xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}'
      }
    ]
  }
};