有人可以帮我弄清楚如何在Webpack 2配置中传递环境变量吗？
尝试通过使用CONFIG函数并使用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];
。
document.querySelectorAll(".tabbable")
答案 0 :(得分：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的this file第105行得到此信息。
答案 1 :(得分：1)
您需要将配置导出为--env才能正常工作。
https://webpack.js.org/configuration/configuration-types/
在你的最后几行中，例如：
const CLIENT_CONFIG = CONFIG()._CLIENT_CONFIG
您正在执行没有参数的CONFIG功能，这意味着您将“未定义”作为“选项”。
<强> 即。您需要导出函数本身，让webpack为您执行。