Webpack 学习笔记（三 - 创建库）

最新推荐文章于 2024-09-15 21:06:29 发布
最新推荐文章于 2024-09-15 21:06:29 发布
阅读量887 收藏 28
点赞数 24
文章标签： webpack 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48958486/article/details/140998543
版权

除了打包应用程序，webpack 还可以打包 JavaScript 库。以下指南适用于希望简化打包策略的库作者。

创建一个库

假设正在编写一个名为 webpack-numbers 的库，用于将数字 1 到 5 转换为文本表示，反之亦然，例如将 2 转换为 'two'。

基本的项目结构应该与下面类似：

project

+  |- webpack.config.js
+  |- package.json
+  |- /src
+    |- index.js
+    |- ref.json

使用 npm 初始化项目，然后安装 webpack、webpack-cli 与 lodash：

npm init -y
npm install --save-dev webpack webpack-cli lodash

注意：由于不需要将 lodash 一同打包到库中，因此应该将其安装为 devDependencies 而非 dependencies，否则库体积会变得很大。

src/ref.json

[
  {
    "num": 1,
    "word": "One"
  },
  {
    "num": 2,
    "word": "Two"
  },
  {
    "num": 3,
    "word": "Three"
  },
  {
    "num": 4,
    "word": "Four"
  },
  {
    "num": 5,
    "word": "Five"
  },
  {
    "num": 0,
    "word": "Zero"
  }
]

src/index.js

import _ from 'lodash';
import numRef from './ref.json';

export function numToWord(num) {
  return _.reduce(
    numRef,
    (accum, ref) => {
      return ref.num === num ? ref.word : accum;
    },
    ''
  );
}

export function wordToNum(word) {
  return _.reduce(
    numRef,
    (accum, ref) => {
      return ref.word === word && word.toLowerCase() ? ref.num : accum;
    },
    -1
  );
}

webpack 配置

从如下 webpack 基本配置开始：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack-numbers.js',
  },
};

上述配置告诉 webpack 将 src/index.js 打包到 dist/webpack-numbers.js 中。

暴露库

到目前为止，一切都应该与打包应用程序一样，但是打包库有一个不同的地方——需要通过 output.library 配置项暴露从入口起点导出的内容。

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'webpack-numbers.js',
+     library: "webpackNumbers",
    },
  };

我们将入口暴露为 webpackNumbers，这样用户就可以通过脚本标签使用它：

<script src="https://example.org/webpack-numbers.js"></script>
<script>
  window.webpackNumbers.wordToNum('Five');
</script>

然而它只能通过被脚本标签引用而发挥作用，而不能运行在 CommonJS、AMD、Node.js 等环境中。

作为一个库作者，我们希望它能够兼容不同的环境。换言之，用户应该能够通过以下方式使用打包后的库：

  • 在 CommonJS 模块中导入：

    const webpackNumbers = require('webpack-numbers');
// ……
webpackNumbers.wordToNum('Two');

  • 在 AMD 模块中导入：

    require(['webpackNumbers'], function (webpackNumbers) {
  // ……
  webpackNumbers.wordToNum('Two');
});

  • 使用脚本标签：

    <!DOCTYPE html>
<html>
  ...
  <script src="https://example.org/webpack-numbers.js"></script>
  <script>
    // ……
    // 全局变量
    webpackNumbers.wordToNum('Five');
    // 属性处于 window 对象中
    window.webpackNumbers.wordToNum('Five');
    // ……
  </script>
</html>

接下来更新 output.library 配置项，将其 type 设置为 'umd'：

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'webpack-numbers.js',
-    library: 'webpackNumbers',
+    library: {
+      name: 'webpackNumbers',
+      type: 'umd',
+    },
   },
 };

现在 webpack 将打包它，使其可以通过 CommonJS、AMD 模块以及脚本标签使用。

提示

请注意，library 选项与 entry 配置项绑定。对于绝大多数的库，指定一个入口就已经足够了。尽管可能存在 multi-part library，但通过作为单个入口起点的 index 脚本 暴露部分导出会更简单。不推荐 使用数组作为 entry。

外部化 lodash

现在，如果执行 webpack，你会发现创建了一个体积相当大的文件。查看文件可以发现 lodash 也被打包到代码中。在这种场景中，我们更倾向于把 lodash 当作 peerDependency，即使用者应该已经自行安装过 lodash，这样便可以放弃控制此外部库，将控制权让给使用此库的开发者。

使用 externals 配置即可实现上述目标：

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'webpack-numbers.js',
      library: {
        name: "webpackNumbers",
        type: "umd"
      },
    },
+   externals: {
+     lodash: {
+       commonjs: 'lodash',
+       commonjs2: 'lodash',
+       amd: 'lodash',
+       root: '_',
+     },
+   },
  };

上面的配置意味着这个库需要一个名为 lodash 的依赖，这个依赖在开发者环境中必须存在且可用。

外部化的限制

对于想要实现从一个依赖中调用多个文件的那些库：

import A from 'library/one';
import B from 'library/two';

// ...

无法通过在 externals 中指定整个 library 的方式将它们从 bundle 中排除，而是需要逐个或者使用正则表达式排除它们。

module.exports = {
  //...
  externals: [
    'library/one',
    'library/two',
    // 匹配以 "library/" 开始的所有依赖
    /^library\/.+$/,
  ],
};

最终步骤

遵循 生产环境 指南中提到的步骤优化生产环境下的输出结果。那么此时还需要生成 bundle 的文件路径，并将其添加到 package.json 中的 main 字段中。

package.json

{
  ...
  "main": "dist/webpack-numbers.js",
  ...
}

或者也可以按照这个 指南 将其添加为标准模块：

{
  ...
  "module": "src/index.js",
  ...
}

此处的键 main 是参照 package.json 标准，而 module 是参照 这个 提案，此提案允许 JavaScript 生态系统升级使用 ES2015 模块，而不会破坏向后兼容性。

警告

module 属性应指向一个使用 ES2015 模块语法的脚本，但不包括浏览器或 Node.js 尚不支持的其他语法特性。这使得 webpack 本身就可以解析模块语法，如果用户只用到库的某些部分，则允许通过 tree shaking 打包更轻量的包。

现在便可以 将其发布为一个 npm 包，并且在 unpkg.com 找到它，并分发给用户。

提示

建议使用 MiniCssExtractPlugin 暴露与库关联的样式表，然后用户可以像使用其他样式表一样使用和加载这些样式表。

Dream_Ji
关注
webpack学习笔记实例
mus-z的博客
07-31 1041
webpack-尚硅谷 https://www.bilibili.com/video/BV1e7411j7T5?p=39 可以去gitee看一下我里面有资料和demo 文章目录webpack-尚硅谷概述五个核心概念看演示~如何打包样式：如何打包html：打包图片：打包其他资源：热加载devServer开发环境搭建生产环境的痛点cssjshtml生产环境配置webpack优化配置开发环境性能优化：优化打包构建速度-HRM优化代码**调试**-source-map生产环境性能优化优化打包构建速度-oneOf优化
【Vue3+Ts】—— webpack学习笔记（一）
qq_53061847的博客
07-04 962
事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了： 但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题： 这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular； 但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的； 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、 TypeScript、打包优化等的；官方解释： webp..
webpack打包UMD学习记录
weixin_42947716的博客
04-11 4461
webpack打包
Webpack打包UMD的export问题
热门推荐
daihaoxin的专栏
05-19 1万+
最近在写一个组件时候遇到一个问题，用webpack将组件打包成一个符合UMD规范的组件时出现一个比较奇怪的现象：使用export default导出的全局变量会多一个default属性： 如： – index.js let webpackDemo = { val: 'hello webpack' } export default webpackDemo; 打包之后发现在全局下只能这么访问val值： webpackDemo.default.val; 修改index.js代码 let webpac.
使用WebPack构建UMD库兼容性原理浅谈
dywade211的博客
05-31 1794
使用WebPack构建UMD库兼容性原理浅谈
如何用webpack打包umd模块并测试打包结果
weixin_34281477的博客
02-22 3902
对于 JavaScript 的模块而言, webpack 可以用来build 基于浏览器或服务端的包. 下面让我们学习如何使用webpack生成UMD. 首先需要全局安装webpack npm install -g webpack 让我们先来创建一个用来返回两数之和的加法模块. // add.js module.exports = fun...
webpack打包工具
m0_63964179的博客
09-02 622
babel-loadr加载器 npm install babel-loader @babel/core @babel/preset-env webpack -D。ts加载器:npm install ts-loader webpack typescript --save-dev 需要创建tsconfig文件。npm i sass-loader -save-dev sass加载器。npm i file-loader --save-dev文件加载器。
学习笔记之webpack4+scss+babel+第三方库配置
皆凡人的博客
05-19 1559
刚自学完一些webpack，总结一下笔记，并制作一个我要用的webpack-starter 主要配置：webpack4+scss+babel+bootstrap+jquery+fontawesome 一、基础知识了解 （一）前端工程化——构建工具的选型介绍： 中文版：《前端工程化——构建工具选型：grunt、gulp、webpack》 上文英文版：GULP VS GRUNT VS...
webpack学习笔记
zhbhun的专栏
08-02 1万+
是什么webpack是一个模块打包工具，通过依赖处理模块，并生成那些模块静态资源。 观察上图，webpack把所有的资源（js，css和图片等）都当做是模块——webpack中可以引用css，css中可以嵌入图片dataUrl，对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。为什么当今网站正在变成一个we
Vue.js第二天学习笔记（vue-router）
11-28
本篇学习笔记主要介绍如何在Vue项目中配置和使用`vue-router`。 首先，确保已经通过npm安装了必要的依赖包，包括`vue`, `vue-router`和`vue-resource`。在终端运行以下命令： ```bash npm install vue vue-router ...
webpack打包library发布到npm
彭世瑜的博客
05-16 904
webpack打包library发布到npm 项目结构 $ tree . ├── package.json ├── src │ └── index.js └── webpack.config.js 入口文件 index.js // src/index.js export function echo(message) { console.log(message); } 依赖配置 package.json { "name": "more-echo", "version": "1.0.0",
ES6项目（二）模块打包发布（npm、webpack、umd）
muer_123的博客
05-09 3755
1. 模块打包 参考ES6项目（一）项目搭建（webpack、babel、react） 2. 模块发布 参考How to Publish a Package 3. 配置webpack和umd（重要事项） module.exports = { entry: __dirname + "/src/index.js",//已多次提及的唯一入口文件 output: { pa...
webpack打包测试_如何用webpack打包umd模块并测试打包结果
weixin_39526872的博客
02-05 295
对于 JavaScript 的模块而言, webpack 可以用来build 基于浏览器或服务端的包.下面让我们学习如何使用webpack生成UMD.首先需要全局安装webpacknpm install -g webpack让我们先来创建一个用来返回两数之和的加法模块.// add.jsmodule.exports = function add(a, b) {return a + b;};接下来,...
使用svelte+webpack 打包成umd形式的js库
你记住你不是一个人在苦逼
03-08 1907
使用svelte+webpack 打包成umd形式的js库
CommonJs, AMD/RequireJs,CMD/seajs, UMD, webpack
洛小宇博客
12-20 1043
JavaSript模块化 在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？ 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的 分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方 式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的 存在。
解决 webpack 配置 sass-loader后报错，无法正常build
Dou_Hua6的博客
09-12 698
sass-resources-loader 主要用于将 Sass 变量、混入（mixin） 和 函数 等工具类样式注入到每个 scss 文件的作用域中。这意味着 sass-resources-loader 不会将实际的样式插入到每个 scss 文件中，而是仅仅将变量和混入等工具类代码注入。如果你在全局引入的 scss 文件中包含普通的 CSS 样式（如选择器和样式定义），这些样式会被反复注入到每个 scss 文件中，导致不必要的重复和冲突。变量、混入和函数等工具类样式。
【webpack4系列】webpack基础用法（二）
最新发布
mengran_code的博客
09-15 838
我们需要注意的是，polyfill的体积是很大的，如果我们不做特殊说明，它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的，造成打包后的体积无谓的增大，所以通常，我们会在presets的选项里，配置"useBuiltIns": “usage”,这样一方面只对使用的新功能做垫片，另一方面，也不需要我们单独引入import '@babel/polyfill’了，它会在使用的地方自动注入。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。
Node.js与Webpack学习笔记：模块化构建详解
"这是关于Node.js、模块化以及Webpack的学习笔记，特别关注了在Vue项目中应用Webpack的细节。笔记涵盖了Node的基础知识，如命令行操作、环境变量、进程概念，以及Node.js的核心特性，包括其作为JavaScript服务器端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值