概述

以下內容均以webpack配置中的output.library.type: 'umd'為基礎

使用webpack將文件打包為library后，打包好的文件被script標簽引用時，library的名字會被放在全局變量中等待使用，至於庫名下的內容，則與webpack配置中的output.library.export屬性值相關。

export默認值

當沒有配置output.library.export/output.library.type為空字符串時，export的默認值為undefined.此時打包library，在使用庫時，庫名下的內容為主文件下的所有導出內容

export: 'default'

當output.library.export的值為default時打包，打包后在使用庫時，庫名下的內容為主文件下使用關鍵字export default導出的內容

export: ['xx1', 'xx2']

當output.library.export的值為['xx1', 'xx2']時打包，打包后在使用庫時，庫名下的內容為主文件下使用關鍵字export let/const xx1導出的內容中的xx2的屬性值

案例演示

准備工作

初始化項目

npm init -y

安裝webpack

npm i webpack webpack-cli -D

配置webpack

const { resolve } = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    library: {
      name: 'Testfile', // 庫名
      type: 'umd', // 允許導出的庫可以在CommonJS/AMD的規范下使用，也可以作為全局變量使用
      export: 'default' // 默認是undefined，不能是空字符串[打包會報錯]
    }
  }
}

新建測試js文件

新建test.js文件

在根目錄的src目錄下創建test.js文件

class Test {
  constructor () {}

  setAge (age) {
    this.age = age;
  }

  getAge () {
    return this.age;
  }
}

export default Test

新建index.js文件

在根目錄的src目錄下創建index.js文件

import Test from "./Test";

export let a = 3
export let obj = {chineseName: '中國'}
export default Test

新建測試index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./dist/bundle.js"></script>
  <script>
    debugger
  </script>
</body>
</html>