JavaScript

Entry

scripts.entry

object

The entry point for the bundle. Defaults to null.

  1. key(string): value(string): Bundle one entry point per HTML page.
  2. key(string): value(array): Creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.

🌰 For example:

scripts: {
  entry: {
    'lib': ['vue', 'vue-router', 'vuex'],
    'ui': ['balm-ui-lite'],
    'home-page': './app/scripts/main.js',
    'sub-page': './app/scripts/subpage.js'
  }
}

Then, your HTML templates:

<!-- Page One -->
<script src="%PUBLIC_URL%/scripts/vendor/lib.js"></script>
<script src="%PUBLIC_URL%/scripts/vendor/ui.js"></script>
<script src="%PUBLIC_URL%/scripts/home-page.js"></script>
<!-- Page Two -->
<script src="%PUBLIC_URL%/scripts/vendor/lib.js"></script>
<script src="%PUBLIC_URL%/scripts/vendor/ui.js"></script>
<script src="%PUBLIC_URL%/scripts/sub-page.js"></script>

Output

scripts.filename

string

Specifies the name of each output file on disk. You must not specify an absolute path here! Defaults to '[name]'.

  • Using the unique hash generated for every build:
filename: '[name].[hash]';
  • Using hashes based on each chunks' content:
filename: '[chunkhash]';

scripts.library

string

New in 0.8.4

The name of the exported library. Defaults to ''.

scripts.libraryTarget

string

New in 0.8.4

The type of the exported library. Defaults to 'var'.

Supported options: var, this, window, global, commonjs, commonjs2, amd, umd.

scripts.umdNamedDefine

string

New in 0.9.0

When using libraryTarget: 'umd', setting:

umdNamedDefine: true;

scripts.chunkFilename

The filename of non-entry chunks as relative path inside the output.path directory. Defaults to '(auto)'.

  • [id] is replaced by the id of the chunk. (automatic setting for development)
  • [name] is replaced by the name of the chunk (or with the id when the chunk has no name).
  • [hash] is replaced by the hash of the compilation.
  • [chunkhash] is replaced by the hash of the chunk. (automatic setting for production)

Loaders

scripts.loaders

array

An array of automatically applied loaders. Defaults to [].

Each item can have these properties:

  • test: A condition that must be met
  • exclude: A condition that must not be met
  • include: A condition that must be met
  • loader: A string of “!” separated loaders
  • loaders: An array of loaders as string

BalmJS default loaders:

List of loaders

🌰 For example:

First, install some loader:

$ npm i -D vue-loader

# OR install with yarn
$ yarn add -D vue-loader

Then, use it:

scripts: {
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ];
}

scripts.extensions

array

An array of extensions that should be used to resolve modules. Defaults to [].

BalmJS default extensions:

🌰 For example:

scripts: {
  extensions: ['.ts', '.tsx'];
}

Before, usage:

// main.js
import foo from 'foo.ts';

Now, you can:

// main.js
import foo from 'foo';

scripts.alias

object

Replace modules by other modules or paths. Defaults to {}.

🌰 For example:

scripts: {
  alias: {
    'vue$': balm.config.production ? 'vue/dist/vue.min.js' : 'vue/dist/vue.esm.js'
  }
}

scripts.include

array

New in 0.9.1

Supply a Rule.include option in babel-loader for some vendor scripts from node_modules. Defaults to [].

Plugins

scripts.plugins

array

Add additional plugins to the compiler. Defaults to [].

List of plugins

Development

scripts.hot

boolean

Hot reload. Defaults to true.

scripts.sourceMap

boolean

Source mapping. Defaults to false.

scripts.target

string

To target a specific environment. Defaults to 'web'.

Target config

scripts.stats

object

Capture timing information for each module. Defaults to:

{
  colors: true,
  modules: false,
  children: false,
  chunks: false,
  chunkModules: false
}

Stats config

scripts.eslint

boolean

The pluggable linting utility for JavaScript and JSX. Defaults to false.

Advanced Options

scripts.webpack

object

New in 0.8.4

Overwrite webpack config. Defaults to {}.

All configuration options

scripts.options

object

New in 0.6.0

UglifyJS options. Defaults to:

{
  compress: {
    comparisons: false,
    drop_console: true
  },
  output: {
    ascii_only: true
  }
}

Optimization

scripts.optimization

object

New in 0.17.0

Best practices of web performance. Defaults to:

{
  splitChunks: {
    chunks: 'async',
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    name: true,
    cacheGroups: {}
  }
}

scripts.vendorName

string

AllInOne vendor filename or Custom Vendor folder name. Defaults to 'vendor'.

scripts.extractAllVendors

boolean

Named scripts.vendor in version < 0.12.0

All vendors in one (for SPA). Defaults to false.

HTML template:

<!-- All vendors in one -->
<script src="%PUBLIC_URL%/scripts/vendor.js"></script>
<!-- Entry -->
<script src="%PUBLIC_URL%/scripts/main.js"></script>

scripts.vendors

array

Custom Vendor Modules. Defaults to []. (automatic setting by scripts.entry)

scripts.cdn

string array object function regex

New in 0.9.0

The same to webpack externals. Defaults to null.

scripts.cssLoader

boolean

New in 0.12.0

Use BalmJS default rules or custom rules for css-loader. Defaults to true.

scripts.extractCss

object

New in 0.12.0

Extract css from some bundle. Defaults to:

{
  enabled: false,
  prefix: ''
}

⚠️ TIPS: Separating styles from scripts for modular management is more conducive to project maintenance and expansion, See BalmJS advanced usage - Code Splitting.

scripts.base64Limit

number

New in 0.22.0

Loads files as base64 encoded URL. Defaults to: 10000.

results matching ""

    No results matching ""