Vuido
  • About Vuido
  • Introduction
  • Installation
    • Manual Configuration
    • Production Builds
  • Usage
    • Window Template
    • Script Section
    • Interpolations
    • Computed Properties
    • Conditionals and Loops
    • Handling User Input
    • Managing Windows
    • Displaying Dialogs
    • Custom Components
    • Using libui Classes
    • Common Attributes
  • Packaging
  • Built-in Components
    • Window
    • Containers
      • Box
      • Form
      • Group
      • Tab
    • Widgets
      • Area
        • AreaGroup
        • AreaPath
        • AreaText
      • Button
      • Checkbox
      • ColorButton
      • Combobox
      • DatePicker
      • DateTimePicker
      • DropdownList
      • FontButton
      • ProgressBar
      • RadioButtons
      • Separator
      • Slider
      • Spinbox
      • Text
      • TextArea
      • TextInput
      • TimePicker
Powered by GitBook
On this page
  1. Installation

Production Builds

PreviousManual ConfigurationNextUsage

Last updated 6 years ago

You can use a single webpack configuration file to create both development and production builds.

The production builds are optimized and minified. They don't contain code which is only used for debugging. You can use the script built in production mode when .

Example of webpack configuration for building a Vuido application in both development and production modes:

const path = require( 'path' );
const webpack = require( 'webpack' );
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
const VuidoTemplateCompiler = require( 'vuido-template-compiler' );

module.exports = function( { production } = {} ) {
  if ( production )
    process.env.NODE_ENV = 'production';

  const config = {
    mode: production ? 'production' : 'development',
    entry: './src/main.js',
    output: {
      path: path.resolve( __dirname, '../dist' ),
      filename: production ? 'main.min.js' : 'main.js'
    },
    target: 'node',
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            compiler: VuidoTemplateCompiler
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.js', '.vue', '.json' ]
    },
    plugins: [
      new webpack.ExternalsPlugin( 'commonjs', [ 'libui-node' ] ),
      new VueLoaderPlugin()
    ]
  };

  return config;
}

By default, webpack will create a development bundle, dist/main.js.

In order to enable the production mode, pass the production environment flag, for example:

webpack --config build/webpack.config.js --env.production

This will create a dist/main.min.js bundle optimized for production.

Note that you must use webpack 4 to be able to minify a Vuido application. Vuido uses some ES6 features which are not supported by the version of UglifyJS used by webpack 3. Alternatively, you can use a different minifier which is compatible with ES6.

packaging your application