webpack打包库和组件

最新推荐文章于 2023-05-06 11:10:03 发布

信海利世

最新推荐文章于 2023-05-06 11:10:03 发布

阅读量389

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/liixnhai/article/details/107749050

版权

webpack 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1、目标

打包 js 库
需要打包压缩版和非压缩版本
持 AMD/CJS/ESM 模块引

2、使用方式

ES module
import * as largeNumber from 'large-number';
// ...
largeNumber.add('999', '1');

CJS
const largeNumbers = require('large-number');
// ...
largeNumber.add('999', '1');

AMD
require(['large-number'], function (large-number) {
// ...
largeNumber.add('999', '1');
});

直接 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>

3、配置

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"
    }
 };

library: 指定库的全局变量
libraryTarget: 支持库引入方式

4、压缩

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            include: /\.min\.js$/,
                    }),
            ],
}

5、设置package.json

package.json 的 main 字段为 index.js

if (process.env.NODE_ENV === "production") {
    module.exports = require("./dist/large-number.min.js");
} else {
    module.exports = require("./dist/large-number.js");
}

信海利世

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack打包库和组件

1、目标打包 js 库需要打包压缩版和压缩版本持 AMD/CJS/ESM 模块引2、使用方式ES moduleimport * as largeNumber from 'large-number';// ...largeNumber.add('999', '1');CJSconst largeNumbers = require('large-number');// ...largeNumber.add('999', '1');AMDrequire(['large-numbe.
复制链接

扫一扫