webpack打包组件和基础库

最新推荐文章于 2023-04-22 17:30:21 发布

爱丽丝学园

最新推荐文章于 2023-04-22 17:30:21 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/qq_45970651/article/details/108313245

版权

一. 概述

什么是webpack

模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

为什么使用webpack

现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时间现前端涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便。

我们的目标是：实现一个大整数加法库的打包。

需要打包压缩版和非压缩版
支持AMD/Commonjs/ES6 Module模块引入。
支持直接使用script标签引入

1. 创建项目目录

// 在终端输入
mkdir npm-large-number
cd npm-large-number
npm init -y

2. 安装webpack & webpack-cli

// 在终端输入
npm i webpack webpack-cli -D

3. 打开项目，创建文件/文件夹，形成以下目录结构

在这里插入图片描述

4. 编写代码

src文件夹下的index.js写入一个大整数相加的方法：

// src/index.js
export default function add (a, b) {
    let i = a.length - 1;
    let j = b.length - 1;
    let res = ''; // 结果
    let carray = 0; // 进位值
    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 + carray;
        if (sum >= 10) {
            carray = 1;
            sum -= 10;
        } else {
            carray = 0;
        }
        res = sum + res;
    }
    if (carray > 0) {
        res = carray + res;
    }
    return res;
}
// add('1', '999');
// add('999', '1');
// add('123', '456');

执行 npm install terser-webpack-plugin -D
安装terser-webpack-plugin

webpack.config.js的配置如下：

// webpack.config.js
// 压缩插件，压缩ES6的语法不会报错，uglifyjs会报错(3.0版本支持)
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: "none",
    entry: {
        'large-number': './src/index.js',
        'large-number.min': './src/index.js'
    },
    output: {
        filename: '[name].js',
        library: 'largeNumber', // 指定库的名称，及库的全局变量
        libraryTarget: 'umd', // 支持库引入的方式
        libraryExport: 'default'
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin({
                include: /\.min\.js$/
            })
        ]
    }
};