Webpack 2での環境変数の受け渡し

Question

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]; 

Answer 1

/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のthis fileの105行目にあります。

Answer 2

--envが機能するように設定をエクスポートする必要があります。あなたはあなたの「オプション」として「未定義」渡している意味がないのparamsとCONFIG機能を、実行している const CLIENT_CONFIG = CONFIG()._CLIENT_CONFIG

：あなたの最後の数行例えばで

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

。

つまり、関数自体をエクスポートしてwebpackに実行させる必要があります。