# 应用打包 - webpack

⚠️ 提示：当前版本使用 webpack@5，balm-core@legacy 中已使用 webpack@4（相关配置请参照对应的 webpack 官方文档）

当你运行 npm run prod --report 时，BalmJS 会启动分析器。

# scripts.entry

interface EntryObject {
  [name: string]: string | string[];
}

type BalmEntry = string | string[] | EntryObject;

scripts.entry: BalmEntry = ''

脚本入口点。

当 scripts.entry 为 EntryObject 对象时：

{ [key: string]: value: string }: 每个 HTML 页面对应一个脚本入口文件。
{ [key: string]: value: string[] }:（提取第三方模块）创建一个单独的文件，由多个入口脚本之间共享的通用模块组成。

🌰 举个栗子：

module.exports = {
  scripts: {
    entry: {
      lib: ['vue', 'vue-router'],
      ui: ['balm-ui'],
      app: './app/scripts/main-page.js',
      subapp: './app/scripts/sub-page.js'
    }
  }
  // 其他配置项...
};

然后，你的 HTML 模板中就可以使用自定义提取 lib 和 ui：

<!-- 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/app.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/subapp.js"></script>

Tips: You can rename vendors with scripts.vendorsName.

# scripts.library

scripts.library: string | object = ''

导出的库的名称。详见 webpack output.library (opens new window)。

🌰 (v4)举个栗子：

module.exports = {
  scripts: {
    library: {
      name: 'AwesomeLibraryName',
      type: 'umd'
    }
  }
  // 其他配置项...
};

# scripts.libraryTarget (Deprecated in v4.0.0)

scripts.libraryTarget: string = 'var'

导出的库的类型。详见 webpack output.libraryTarget (opens new window)。

🌰 (v3)举个栗子：

module.exports = {
  scripts: {
    library: 'AwesomeLibraryName',
    libraryTarget: 'umd'
  }
  // 其他配置项...
};

# scripts.loaders

scripts.loaders: RuleSetRule[] = []

一系列自动应用的 loaders (opens new window)。

BalmJS 默认已加载的 loaders:

babel (opens new window)
style (opens new window)
css (opens new window)
postcss (opens new window)
html (opens new window)
url (opens new window) (Deprecated in v4.5.0)
file (opens new window) (Deprecated in v4.5.0)

Loaders 列表 (opens new window)

🌰 举个栗子：

首先，安装一个你需要的 loader（下面以 vue-loader 为例）：

yarn add -D vue-loader
# OR
npm i -D vue-loader

然后，加载它：

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  scripts: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
    plugins: [new VueLoaderPlugin()]
  }
  // 其他配置项...
};

# scripts.defaultLoaders

interface BalmLoaders {
  js?: boolean;
  css?: boolean;
  html?: boolean;
  url?: boolean; // For v3, deprecated in v4
  asset?: boolean; // New in v4
}

scripts.defaultLoaders: BalmLoaders = {}

Rename ~~disableDefaultLoaders~~ to defaultLoaders in 2.5.0

启用或禁用 BalmJS 某些默认 loaders。

# scripts.useEsModule

scripts.useEsModule: boolean = true

New in 2.23.0

BalmJS 默认 loaders 使用 ES modules 语法。

# scripts.includeJsResource

scripts.includeJsResource: string[] = []

（绝对路径）在 babel-loader 中为某些需要额外依赖的脚本提供一个 Rule.include (opens new window) 选项。

# scripts.excludeUrlResource (Deprecated in v4.5.0)

scripts.excludeUrlResource: string[] = []

New in 3.7.0

（绝对路径）在 url-loader 中为某些图片资源提供一个 Rule.exclude (opens new window) 选项。

# scripts.babelLoaderOptions

scripts.babelLoaderOptions: object = {}

New in 3.9.6

balm 默认的 babel-loader 中额外的配置。详细配置 (opens new window)。

# scripts.urlLoaderOptions (Deprecated in v4.5.0)

scripts.urlLoaderOptions: object = {}

New in 2.1.0

balm 默认的 url-loader 中额外的配置。详细配置 (opens new window)。

🌰 举个栗子：

module.exports = {
  scripts: {
    urlLoaderOptions: {
      esModule: false
    }
  }
  // 其他配置项...
};

vue 文件之前的用法：

<template>
  <img :src="require('@/assets/logo.png').default" />
</template>

现在的用法：

<template>
  <img :src="require('@/assets/logo.png')" />
</template>

# scripts.postcssLoaderOptions

interface PostcssLoaderOptions {
  exec?: boolean;
  postcssOptions?: object | Function;
  sourceMap: string | boolean;
}

scripts.postcssLoaderOptions: PostcssLoaderOptions = { sourceMap: false }

Migrated from ~~styles.postcssLoaderOptions~~ in 2.11.0

PostCSS loader 详细配置 (opens new window)。

# scripts.htmlLoaderOptions

scripts.htmlLoaderOptions: object = {}

New in 2.11.0

balm 默认的 html-loader 中额外的配置。详细配置 (opens new window)。

# scripts.imageAssetType

scripts.imageAssetType: 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' = 'asset'

New in 4.7.0

资源模块类型。

# scripts.imageInlineSizeLimit

scripts.imageInlineSizeLimit: number = 8096

New in 4.7.0

如果一个模块源码大小小于 maxSize，那么模块会被作为一个 Base64 编码的字符串注入到包中，否则模块文件会被生成到输出的目标目录中。

# scripts.extensions

scripts.extensions: string[] = []

用来解析模块的文件扩展。

BalmJS 默认已支持的扩展名：

🌰 举个栗子：

module.exports = {
  scripts: {
    extensions: ['.vue']
  }
  // 其他配置项...
};

之前的用法：

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

现在的用法：

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

# scripts.alias

scripts.alias: object = {}

自定义别名，用其他模块或路径替换模块。

🌰 举个栗子：

module.exports = {
  scripts: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  }
  // 其他配置项...
};

# scripts.optimization

scripts.optimization: object = {}

WEB 性能优化。详见 webpack optimization (opens new window)。

# scripts.plugins

scripts.plugins: Plugin[] = []

添加额外的插件到编译器。

Plugins 列表 (opens new window)

# scripts.nodeEnv

scripts.nodeEnv: object = {}

New in 4.7.0

为 process.env 定义环境变量。

# scripts.injectHtml

scripts.injectHtml: boolean = false

New in 3.16.0

自动注入脚本并生成 HTML 入口文件。（默认需要手动创建 HTML 入口文件）

提示：因为默认模版中的 <body> 元素内容为空，所以你需要通过 scripts.htmlPluginOptions.template 为一些单页面应用（如 Vue.js）设置一个自定义模版。

# scripts.htmlPluginOptions

scripts.htmlPluginOptions: object = {}

New in 3.16.0

balm 默认的 html-webpack-plugin 中额外的配置。详细配置 (opens new window)。

🌰 For example:

单页面应用

module.exports = {
  scripts: {
    entry: {
      app: './app/scripts/main.js'
    }
  },
  injectHtml: true
  // Other Options...
};

多页面应用

module.exports = {
  scripts: {
    entry: {
      'page-1': './app/scripts/p1.js',
      'page-2': './app/scripts/p2.js'
    }
  },
  injectHtml: true,
  htmlPluginOptions: {
    template: './app/templates/index.html'
    title: ['Page 1', 'Page 2']
  }
  // Other Options...
};

# scripts.extractCss

~~scripts.extractCss: { enabled: boolean; prefix: string; } for balm-core < 3.16.0~~

scripts.extractCss: boolean = false

提取脚本中的样式。（需设置 scripts.injectHtml = true）

仅生产模式下有效

⚠️ 提示： 将样式从脚本中分离进行模块化管理更有利于项目维护和扩展，详见 BalmJS 进阶用法 - 代码分离。

# scripts.sourceMap

scripts.sourceMap: string | boolean = false

开启源映射。详见 webpack devtool (opens new window)。

# scripts.target

v4：scripts.target: string | string[] = ['web', 'es5']
v3：scripts.target: string = 'web'

针对特定的环境来编译脚本。详见 webpack target (opens new window)。

# scripts.externals

scripts.externals: string | object | Function | RegExp = ''

从打包中排除依赖项的方法。详见 webpack externals (opens new window)。

# scripts.stats

scripts.stats: string | object

捕获每个模块的编译信息。详见 webpack stats (opens new window)。

v4 默认值为：

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

v3 默认值为：

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

# scripts.webpackOptions

scripts.webpackOptions: object = {}

完整可自定义的 webpack 配置 (opens new window)。

# scripts.extractAllVendors

scripts.extractAllVendors: boolean = false

HTML 模板：

<!-- 提取所有第三方脚本 -->
<script src="%PUBLIC_URL%/scripts/vendor.js"></script>
<!-- 入口脚本 -->
<script src="%PUBLIC_URL%/scripts/main.js"></script>

Tips: 你可以使用使用 scripts.vendorsName 来重命名 vendors。

# scripts.vendorsName

scripts.vendorsName: string = 'vendors'

提取 所有第三方依赖 合成一个文件的 文件名，或提取 部分第三方依赖 合成自定义文件的 文件夹名。

# scripts.useCache (Deprecated in 3.19.0)

scripts.useCache: boolean = false

Rename ~~inject~~ to useCache in 3.16.0

支持 SSR 模式中构建脚本生成 hash。

# scripts.ie8

scripts.ie8: boolean = false

New in 2.2.0

支持低版本 IE 浏览器（IE6-8）。IE 向下兼容性配置.

⚠️ 提示： 在 IE8 中，请不要使用 (ES6) Class 的 get 和 set 用法。

← 脚本类库打包 - rollup →