# 应用打包 - webpack

⚠️ 提示:当前版本使用 webpack@5balm-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.entryEntryObject 对象时:

  1. { [key: string]: value: string }: 每个 HTML 页面对应一个脚本入口文件。
  2. { [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 模板中就可以使用自定义提取 libui

<!-- 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:

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) Classgetset 用法。

Last Updated: a year ago