大佬教程收集整理的这篇文章主要介绍了Webpack打包library初体验,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
以下内容均以
webpack
配置中的output.library.type: 'umd'
为基础
使用webpack
将文件打包为library
后,打包好的文件被script
标签引用时,library
的名字会被放在全局变量中等待使用,至于库名下的内容,则与webpack
配置中的output.library.export
属性值相关。
当没有配置output.library.export
/output.library.type
为空字符串时,export的默认值为undefined
.此时打包library
,在使用库时,库名下的内容为主文件下的所有导出内容
当output.library.export
的值为default
时打包,打包后在使用库时,库名下的内容为主文件下使用关键字export default
导出的内容
当output.library.export
的值为['xx1', 'xx2']
时打包,打包后在使用库时,库名下的内容为主文件下使用关键字export let/const xx1
导出的内容中的xx2
的属性值
npm init -y
npm i webpack webpack-cli -D
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,不能是空字符串[打包会报错]
}
}
}
在根目录的src目录下创建test.js
文件
class Test {
constructor () {}
setAge (age) {
this.age = age;
}
getAge () {
return this.age;
}
}
export default Test
在根目录的src目录下创建index.js
文件
import Test from "./Test";
export let a = 3
export let obj = {chineseName: '中国'}
export default Test
<!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>
在package.json
中的scripts
下添加
"dev": "webpack"
打开控制台,输入npm run dev
,打包库
在浏览器中打开index.html
文件,并打开开发者工具,刷新页面。
可以在开发者工具中看到全局变量Testfile
的内容为
index.js
中导出的所有内容的对象
可以在开发者工具中看到全局变量Testfile
的内容为
index.js
中使用export default
导出的内容
可以在开发者工具中看到全局变量Testfile
的内容为
index.js
中使用export let a = 3
导出的内容结果值
可以在开发者工具中看到全局变量Testfile
的内容为
index.js
中使用let obj = {chineseName: '中国'}
导出的内容结果值以上是大佬教程为你收集整理的Webpack打包library初体验全部内容,希望文章能够帮你解决Webpack打包library初体验所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。