C/C++教程

Webpack打包library初体验

本文主要是介绍Webpack打包library初体验，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

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

配置webpack到package.json

在package.json中的scripts下添加

"dev": "webpack"

打包测试

打开控制台，输入npm run dev,打包库

运行index.html文件

在浏览器中打开index.html文件，并打开开发者工具，刷新页面。

export类型

webpack中没有配置export属性

可以在开发者工具中看到全局变量Testfile的内容为
image
此时Testfile是一个包含了index.js中导出的所有内容的对象

export属性值为default

可以在开发者工具中看到全局变量Testfile的内容为
image
此时Testfile是index.js中使用export default导出的内容

export属性值为a

可以在开发者工具中看到全局变量Testfile的内容为
image
此时Testfile是index.js中使用export let a = 3导出的内容结果值

export属性值为['obj', 'chineseName']

可以在开发者工具中看到全局变量Testfile的内容为
image
此时Testfile是index.js中使用export let obj = {chineseName: '中国'}导出的内容结果值

这篇关于Webpack打包library初体验的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航