webpack进阶篇（二十五）：webpack打包组件和基础库
Posted 凯小默的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack进阶篇（二十五）：webpack打包组件和基础库相关的知识，希望对你有一定的参考价值。
webpack 打包库和组件
webpack 除了可以⽤来打包应⽤，也可以⽤来打包 js 库。
接下来我们实现⼀个⼤整数加法库的打包
- 需要打包压缩版和⾮压缩版本
- ⽀持 AMD/CJS/ESM 模块引⼊
库的录结构和打包要求
打包输出的库名称:
- 未压缩版 large-number.js
- 压缩版 large-number.min.js
+ |- /dist
+ |- large-number.js
+ |- large-number.min.js
+ |- webpack.config.js
+ |- package.json
+ |- index.js
+ |- /src
+ |- index.js
支持的使用方式
1、⽀持 ES module
import * as largeNumber from large-number;
// ...
largeNumber.add(999, 1);
2、⽀持 CJS
const largeNumbers = require(large-number);
// ...
largeNumber.add(999, 1);
3、⽀持 AMD
require([large-number], function (large-number)
// ...
largeNumber.add(999, 1);
);
4、可以直接通过 script 引⼊
<!doctype html>
<html>
...
<script src="https://unpkg.com/large-number"></script>
<script>// ...
// Global variable
largeNumber.add(999, 1);
// Property in the window object
window.largeNumber.add(999, 1);
// ...</script>
</html>
如何将库暴露出去？
library: 指定库的全局变量
libraryTarget: ⽀持库引⼊的⽅式
module.exports =
mode: "production",
entry:
"large-number": "./src/index.js",
"large-number.min": "./src/index.js"
,
output:
filename: "[name].js",
library: "largeNumber",
libraryExport: "default",
libraryTarget: "umd"
;
如何指对 .min 压缩
通过 include 设置只压缩 min.js 结尾的⽂件
module.exports =
mode: "none",
entry:
"large-number": "./src/index.js",
"large-number.min": "./src/index.js"
,
output:
filename: "[name].js",
library: "largeNumber",
libraryTarget: "umd"
,
optimization:
minimize: true,
minimizer: [
new TerserPlugin(
include: /\\.min\\.js$/,
),
],
;
设置入口文件
package.json 的 main 字段为 index.js，根目录新增index.js文件
if (process.env.NODE_ENV === "production")
module.exports = require("./dist/large-number.min.js");
else
module.exports = require("./dist/large-number.js");
实战开发
1、初始化项目
mkdir large-number
cd large-number
npm init -y
npm i webpack webpack-cli -D
2、创建src/index.js，在里面实现大整数加法功能
export default function add(a, b)
let i = a.length - 1;
let j = b.length - 1;
let carry = 0;
let ret = ;
while (i >= 0 || j >= 0)
let x = 0;
let y = 0;
let sum;
if (i >= 0)
x = a[i] - 0;
i --;
if (j >= 0)
y = b[j] - 0;
j --;
sum = x + y + carry;
if (sum >= 10)
carry = 1;
sum -= 10;
else
carry = 0;
// 0 +
ret = sum + ret;
if (carry)
ret = carry + ret;
return ret;
// add(999, 1);
// add(1, 999);
// add(123, 321);
// console.log(add(999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999, 1));
3、创建webpack.config.js
需要安装插件：npm i terser-webpack-plugin -D
“terser-webpack-plugin”: “^1.3.0”，4.0会报错
const TerserPlugin = require(terser-webpack-plugin);
module.exports =
entry:
large-number: ./src/index.js,
large-number.min: ./src/index.js
,
output:
filename: [name].js,
library: largeNumber,
libraryTarget: umd,
libraryExport: default
,
mode: none,
optimization:
minimize: true,
minimizer: [
new TerserPlugin(
include: /\\.min\\.js$/,
),
],
打包的效果就实现了压缩
4、设置入口文件
根目录新增index.js文件
if (process.env.NODE_ENV === "production")
module.exports = require("./dist/large-number.min.js");
else
module.exports = require("./dist/large-number.js");
package.json的配置，里面添加了prepublish的处理
"name": "large-number",
"version": "1.0.0",
"description": "大整数加法打包",
"main": "index.js",
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1",
"build": "webpack",
"prepublish": "webpack"
,
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
"terser-webpack-plugin": "^1.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
5、发布npm包，包名需要更改，我这边用了kaimo-large-number
具体可以参考我的另一篇笔记
怎么将自己的写的库发布到npm上面？
6、使用自己的npm包
首先在我们的业务安装npm i kaimo-large-number -S
然后在业务代码里面使用’kaimo-large-number’
import React from react;
import ReactDOM from react-dom;
import ./search.less;
import logo from ./images/logo.png;
console.log(logo);
import ../../common/index.js;
import kaimo666 from ./tree-shaking.js;
// 引入大加法
import kaimoLargeNumber from kaimo-large-number;
class Search extends React.Component
constructor()
super(...arguments);
this.state =
Text: null
loadComponent()
// 动态加在text.js，返回一个promise
import(./text.js).then((Text) =>
console.log(Text);
this.setState(
Text: Text.default
);
)
render()
const kaimo = kaimo666();
const Text = this.state;
const kaimoLarge = kaimoLargeNumber(777, 666);
return <div className="search-text">
kaimo
凯小默的博客666
Text ? <Text /> : null
大加法操作777+666： kaimoLarge
<img src= logo onClick= this.loadComponent.bind(this) />
</div>
ReactDOM.render(
<Search/>,
document.getElementById(root)
)
页面效果：
如果你npm run build的出现下面问题：说明你发布的包有问题没有把dist目录包含进来，去除你git忽略文件里的dist，你需要更新你的包
找到自己库的.gitignore文件，去掉dist
以上是关于webpack进阶篇（二十五）：webpack打包组件和基础库的主要内容，如果未能解决你的问题，请参考以下文章