I'm trying to add a global constant to my project. For this I use webpack.DefinePlugin. This works if I add one in the module.exports. I fail to do this conditionally however. In the config below I'm able to use the __VERSION__ constant in my module after declaring it like so: declare var __VERSION__: string;. If I try to use __VERSION2__ or __VERSION3__ I get an error in the console ReferenceError: __VERSION3__ is not defined. If my understanding is correct this should have been replaced. Does this mean that the conditional part is not executed or not executed correctly? How can I debug this? Or even better, how can I fix this?
Note: the intention is to switch a url based on development or production build.
The current project can be found here on github
webpack.config.js:
// Based on https://github.com/microsoft/typescript-vue-starter#adding-webpackvar path = require('path')
var webpack = require('webpack')
module.exports = {
mode: 'development',
entry: './src/ts/main.ts',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map// the "scss" and "sass" values for the lang attribute to the right configs here.// other preprocessors should work out of the box, no loader config like this necessary.'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
// other vue-loader options go here
}
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new webpack.DefinePlugin({
__VERSION__: JSON.stringify('1.0.0.' + Date.now())
})],
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: 'source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = 'source-map'// http://vue-loader.vuejs.org/en/workflow/production.htmlmodule.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.DefinePlugin({
__IN_DEBUG__: JSON.stringify(false),
__VERSION2__: JSON.stringify('1.0.0.' + Date.now())
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
else if(process.env.NODE_ENV === 'development')
{
module.exports.plugins.push(
new webpack.DefinePlugin({
__VERSION3__: JSON.stringify('1.0.0.' + Date.now())
}));
}
It looks like you are trying to define different constants for different build environments (development and production). To do this, you can use the webpack.DefinePlugin inside the appropriate environment block.
For example, you can define the VERSION constant for the development environment like this:
if (process.env.NODE_ENV === 'development') { module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ VERSION: JSON.stringify('1.0.0.' + Date.now()) }), ]) } And you can define the VERSION2 constant for the production environment like this: if (process.env.NODE_ENV === 'production') { module.exports.devtool = 'source-map' module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.DefinePlugin({ IN_DEBUG: JSON.stringify(false), VERSION2: JSON.stringify('1.0.0.' + Date.now()) }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
This way, the constants will be defined only for the appropriate build environment.
To debug this issue, you can try printing the value of process.env.NODE_ENV to the console to make sure that it is set correctly. You can also try using the webpack-bundle-analyzer plugin to see which constants are included in the bundle.