Code that is executed at compile time and code that is executed at runtime

Question

I am new to Vue and Webpack. I recently created a static web application 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 realized that the expression process.env.NODE_ENVis evaluated at compile time. My questions

• how can I tell if an expression is being executed at compile time or at runtime (i.e. in browsers), since it is a valid javascript expression anyway?
• Is it possible to determine the functions performed at compile time?

Answer 1

DefinePlugin, " " .

- :

const webpack = require('webpack');

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

process.env.NODE_ENV "development". UglifyJsPlugin, :

// 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');

, (.. ), javascript ?

, DefinePlugin, , .

, ?

, , ( , script). , Uglify, .

EDIT: val-loader .