2

有人可以帮我弄清楚如何在 Webpack 2 配置中传递环境变量吗？尝试通过使用 CONFIG 函数并使用./node_modules/.bin/webpack --env.ENV development设置它们来传递环境变量。使用options.ENV等时，我得到一个TypeError: Cannot read property 'ENV' of undefined.

const fs      = require('fs');
const path    = require('path');
const webpack = require('webpack');
const assign  = require('object.assign');

// Webpack Plugins
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

// Constants
const constants = require('./constants');

const ROOT_DIR   = constants.ROOT_DIR;   // './'
const SRC_DIR    = constants.SRC_DIR;    // './src'
const CLIENT_DIR = constants.CLIENT_DIR; // './dist/client'
const SERVER_DIR = constants.SERVER_DIR; // './dist/server'

const VENDOR_NAME = constants.VENDOR_NAME; // 'vendor'
const SERVER_NAME = constants.SERVER_NAME; // 'server'
const CLIENT_NAME = constants.CLIENT_NAME; // 'main.browser'

const SERVER_SOURCE_PATH = constants.SERVER_SOURCE_PATH; // './src/server/app.ts'
const VENDOR_SOURCE_PATH = constants.VENDOR_SOURCE_PATH; // './src/vendor.ts'
const CLIENT_SOURCE_PATH = constants.CLIENT_SOURCE_PATH; // './src/main.browser.ts'

function CONFIG(options) {
  // Webpack Constants
  const NODE_MODULES = fs.readdirSync(ROOT_DIR + '/node_modules').filter((name) => {
    return name != '.bin';
  });
  const LOADERS = [{
    test: /\.ts$/,
    loader: 'awesome-typescript',
    exclude: [
      /\.(spec|e2e)\.ts$/,
      /node_modules/
    ]
  }, {
    test: /\.html$/,
    loader: 'raw'
  }, {
    test: /\.json$/,
    loader: 'json'
  }, {
    test: /\.css$/,
    loader: 'to-string!css!postcss'
  }, {
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
    loader: 'url',
    query: { limit: 10000 }
  }];
  const AUTOPREFIXER_BROWSERS = [
    'last 2 versions'
  ];
  const POSTCSS = function() {
    return [
      require('postcss-partial-import'),
      require('postcss-nested'),
      require('postcss-mixins'),
      require('lost')(),
      require('postcss-cssnext')({
        browsers: AUTOPREFIXER_BROWSERS
      })
    ]
  }
  const COMMOM_PLUGINS = [
    new ForkCheckerPlugin(),
    // new webpack.DefinePlugin({
    //   ENV: JSON.stringify(options.ENV),
    //   NODE_ENV: JSON.stringify(options.ENV)
    // }),
    // ...options.development ? [] : [
    //     // production
    //     new webpack.LoaderOptionsPlugin({
    //     minimize: true,
    //     debug: false
    //   }),
    //   new webpack.optimize.UglifyJsPlugin({
    //     beautify: false,
    //     mangle: {
    //       screw_ie8 : true,
    //       keep_fnames: true
    //     },
    //     compress: {
    //       screw_ie8: true,
    //       warnings: false
    //     },
    //     output: {
    //       comments: false
    //     },
    //     sourceMap: false
    //   }),
    //   new CompressionPlugin({
    //     regExp: /\.css$|\.html$|\.js$|\.map$/,
    //     threshold: 2 * 1024
    //   })
    // ]
  ];
  // Webpack Common config
  const COMMON = {
    // devtool: options.development ? "cheap-module-eval-source-map" : false,
    // cache: options.development,
    // debug: options.development,
    resolve: {
      // cache: options.development,
      root: SRC_DIR,
      extensions: ['', '.ts', '.js']
    },
    module: {
      noParse: [
        path.join(__dirname, 'zone.js', 'dist'),
        path.join(__dirname, 'angular2', 'bundles')
      ],
      loaders: LOADERS
    },
    postcss: POSTCSS,
    node: {
      global: true,
      __dirname: true,
      __filename: true,
      process: true,
      // Buffer: options.development ? false : true
    }
  };
  // Webpack Client config
  const CLIENT = {
    target: 'web',
    entry: {
      [VENDOR_NAME]: VENDOR_SOURCE_PATH,
      [CLIENT_NAME]: CLIENT_SOURCE_PATH
    },
    output: {
      path: CLIENT_DIR,
      filename: '[name].js',
      sourceMapFilename: '[name].map',
      chunkFilename: '[id].chunk.js'
    },
    plugins: [
      ...COMMOM_PLUGINS,
      new CopyWebpackPlugin([{
        from: `${SRC_DIR}/assets`,
        to: 'common/assets'
      }])
    ]
  };
  // Webpack Server config
  const SERVER = {
    target: 'node',
    entry: {
      [SERVER_NAME]: SERVER_SOURCE_PATH
    },
    output: {
      path: SERVER_DIR,
      filename: '[name].js',
      chunkFilename: '[id].' + SERVER_NAME + '.js'
    },
    plugins: [
      ...COMMOM_PLUGINS
    ],
    externals: [
      NODE_MODULES.map(function(name) { return new RegExp('^' + name) }),
    ]
  };

  const _CLIENT_CONFIG = assign(CLIENT, COMMON);
  const _SERVER_CONFIG = assign(SERVER, COMMON);
  return {
    _CLIENT_CONFIG,
    _SERVER_CONFIG
  }
}

const CLIENT_CONFIG = CONFIG()._CLIENT_CONFIG
const SERVER_CONFIG = CONFIG()._SERVER_CONFIG

// Export
module.exports = [CLIENT_CONFIG, SERVER_CONFIG];
4

2 回答 2

2

您需要 /src 文件夹下的 d.ts 文件。

在你的 webpack.config.js 中：

const DefinePlugin = require('webpack/lib/DefinePlugin');

取消注释该new webpack.DefinePlugin部分。

在您的 src 文件夹或其子文件夹中，创建一个custome.typings.d.ts（或以 .d.ts 结尾的其他名称），添加一行：

declare var ENV: string;

然后你准备好了。

在angular2-webpack-starter文件的第 105 行得到了这个。

于 2016-04-28T10:42:34.017 回答
1

您需要将配置导出为 --env 工作的函数。

https://webpack.js.org/configuration/configuration-types/

在您的最后几行中，例如： const CLIENT_CONFIG = CONFIG()._CLIENT_CONFIG

您正在执行没有参数的 CONFIG 函数，这意味着您将“未定义”作为“选项”传递。

ie你需要自己导出函数，让webpack为你执行。

于 2017-03-24T17:44:52.817 回答