首页 > 其他分享> > Webpack打包library初体验

Webpack打包library初体验

2021-10-28 23:35:54 作者：互联网

概述

以下内容均以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>