Code that run at compile-time vs code that run at runtime

Question

I'm new to Vue and Webpack. I have recently generated a static web app using vue-cli, and played with it for a while. Here is a snippet in src/components/hello.vue:

export default {
  name: 'hello',
  data () {
    return {
      msg: process.env.NODE_ENV
    }
  }
}

I recognized that the expression process.env.NODE_ENV is evaluated at compile-time. My questions are

1. how can I tell if an expression is evaluated at compile-time or at runtime (i.e. on the browsers) since it is a valid javascript expression in either case?
2. can I define functions that run at compile-time?

Answer 1

This is made possible with DefinePlugin, which essentially works as a "find and replace" operation in your code.

Simply add it to your webpack config like this:

const webpack = require('webpack');

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"',
    })
  ]
}

This will replace all occurances of process.env.NODE_ENV in your code with "development". If you combine this with the UglifyJsPlugin, then it will take care of removing the resulting dead code from your build:

// Original code

if (process.env.NODE_ENV === 'development') {
  alert('development build');
} else {
  alert('non-development build');
}

// After DefinePlugin

if ("development" === 'development') {
  alert('development build');
} else {
  alert('non-development build');
}

// After Uglify

alert('development build');

How can I tell if an expression is evaluated at compile-time or at runtime (i.e. on the browsers) since it is a valid javascript expression in either case?

The object you pass to the constructor of DefinePlugin contains the code definitions that will be translated at compile time.

Can I define functions that run at compile-time?

I don't think so, at least not within the code being built (but you can write functions that are a part of your build script). It might be an optimization that Uglify can do, but it would be pretty intense.

EDIT: val-loader can generate source code at build time.