随笔分类 - webpack

vite-plugin-federation vite&rollup 模块联邦插件

摘要：vite-plugin-federation vite&rollup 模块联邦插件，和webpack 的模块联邦插件兼容模块联邦是一个很不错的前端模块化机制，对于微前端领域是一个很不错的选择，而且vite-plugin-federation 可以直接与webpack 的构建兼容，对于使用不同构建工具阅读全文

posted @ 2023-07-10 11:02 荣锋亮阅读(568) 评论(0) 推荐(0) 编辑

tsup 简单快速的typescript库打包工具

摘要：tsup 是一个很不错的工具，可以方便的进行typescript 应用打包以及构建，支持了灵活的资源加载处理 tsx 也是一个不错的工具，可以进行dev 模式的处理 tsup 参考配置 tsup.config.js import { defineConfig } from 'tsup' export 阅读全文

posted @ 2023-02-19 12:53 荣锋亮阅读(612) 评论(0) 推荐(0) 编辑

集成unpkg npm包发布说明

摘要：主要在发布npm包的时候遵循了unpkg的要去，那么我们就能利用unpkg 灵活强大的npm 访问能力了以下是一个简单的说明参考流程使用umd 格式（浏览器以及node 都能使用的）添加 umd （或者dist）目录，同时添加gitignore 构建生成umd 格式（webpack,parce 阅读全文

posted @ 2021-02-18 15:44 荣锋亮阅读(1177) 评论(0) 推荐(0) 编辑

unpkg +verdaccio+ webpack 联邦实现多版本控制

摘要：参考了jherr 的webpack 联邦多版本，基于unpkg 以及verdaccio实现一个私有版本的测试环境环境准备 docker-compose version: "3" services: unpkg: image: dalongrong/unpkg:http-env environmen 阅读全文

posted @ 2021-02-18 14:58 荣锋亮阅读(561) 评论(0) 推荐(0) 编辑

简单webpack plugin 开发

摘要：重要是学习下怎么开发webpack plugin，同时记录下插件模型 webpack 是一个插件，可以是javascript class ，或者具名 class 定义apply 方法指定一个绑定到webpack 自身的事件钩子使用webpack提供的plugin api 操作构建结果参考格式阅读全文

posted @ 2019-02-14 14:21 荣锋亮阅读(874) 评论(0) 推荐(0) 编辑

webpack 图片资源处理

摘要：备注： css 引用图片资源 1. 安装loader yarn add file-loader --dev 2. 配置 const path = require("path"); const extracttextplugin = require("extract-text-webpack-plug 阅读全文

posted @ 2017-12-29 10:29 荣锋亮阅读(213) 评论(0) 推荐(0) 编辑

webpack libray 参考例子

摘要：备注：使用webpack 进行模块导出，方便进行通信 1. 项目初始化 ├── main.js ├── package.json ├── show.js ├── webpack.config.js └── yarn.lock 2. 代码说明 main.js const shortid = requ 阅读全文

posted @ 2017-12-29 10:17 荣锋亮阅读(310) 评论(0) 推荐(0) 编辑

webpack css loader 使用

摘要：备注：接上面的项目 1. 添加css main.css #app { text-align:center; } main.js require("./main.css"); const shortid = require("shortid"); const demo = require("./sh 阅读全文

posted @ 2017-12-29 10:16 荣锋亮阅读(1447) 评论(0) 推荐(0) 编辑

webpack extract-text-webpack-plugin

摘要：备注：提炼上面引用的css 1. 插件配置 const path = require("path"); const extracttextplugin = require("extract-text-webpack-plugin"); module.exports = { entry:"./mai 阅读全文

posted @ 2017-12-29 10:16 荣锋亮阅读(679) 评论(0) 推荐(0) 编辑

webpack 简单使用

摘要：备注：使用yarn 结合npm 模块进行简单项目开发 1. 安装 yarn init yarn add webpack --dev yarn global add live-server 2. 添加shoritd 依赖模块 yarn add shoritd 3. 项目结构 ├── index.ht 阅读全文

posted @ 2017-12-29 10:15 荣锋亮阅读(191) 评论(0) 推荐(0) 编辑

xcomponent web 跨域组件介绍

摘要：1. 项目地址： https://github.com/krakenjs/xcomponent 2. 支持的特性 a. Render an iframe or popup on a different domain, and pass down props, including objects an 阅读全文

posted @ 2017-11-07 10:18 荣锋亮阅读(602) 评论(0) 推荐(0) 编辑